我有按鈕Description。單擊時顯示說明。現在我想添加Read more/less描述。
使用belpw代碼，我看不到按鈕Description，直接顯示描述
流-顯示按鈕->單擊時->顯示 200 個字符的文本（帶有閱讀更多選項）
const [readMore, setReadMore] = useState(false);
const [displaydescription, setDisplayDescription] = useState(false);
const clickHandler = () => {
setDisplayDescription(true);
};
<p>
{displaydescription || readMore
? description
: `${description.substring(0, 200)}`}
</p>
uj5u.com熱心網友回復：
您必須將代碼更改為首先顯示描述，然后在第二種情況下驗證是否要顯示如下全文：
const [readMore, setReadMore] = useState(false);
const [displaydescription, setDisplayDescription] = useState(false);
const clickHandler = () => {
setDisplayDescription(true);
};
<p>
{displaydescription
? (
readMore
? description
: `${description.substring(0, 200)
)
: null}`
}
</p>uj5u.com熱心網友回復：
在 React jsx 中添加條件的語法是 {condition && } 所以你可以試試
{ description && !readmore
<p> `${description.substring(0, 200)}` <p>
}
{ description && readmore
<p> `${description}` <p>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425254.html
標籤：javascript 反应 按钮 显示隐藏
上一篇：如何為串列中的一行/每個回圈獲取“編輯”按鈕？[SwiftUI]
下一篇：如何測量用戶按住按鈕的時間？