我有一個表格，我正在實施一個搜索功能，該功能搜索元素并在將搜索詞輸入到搜索欄中時突出顯示搜索詞。我讓搜索功能正常作業，但沒有突出顯示。
我想根據我的輸入狀態有條件地將自定義樣式應用于我的 array.map 中的文本，或者有條件地使用樣式呈現自定義元素。這是代碼（代碼中的注釋）
<Table className={styles.table}>
<thead>
<tr>
<th>Description</th>
<th>Date and time</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
{input.length < 1 ? displayTransactions.map(transaction => (
<tr key={transaction._id}>
<td>{transaction.description}</td>
<td>{transaction.date}</td>
<td className={styles.debit}>- ${transaction.debit}</td>
<td className={styles.credit}> ${transaction.credit}</td>
<td>{transaction.balance}</td>
</tr>
)) : output.map(transaction => (
<tr key={transaction._id}>
{transaction.description.includes(input) ? <td className={styles.highlight}>transaction.description</td>: <td>transaction.description</td>} // I want to either render the comp with a styled class and I can add CSS to it or like below apply styling directly
<td>transaction.description.includes(input) ? // apply style directly here transaction.description ? transaction.description</td>
<td>{transaction.date}</td>
<td className={styles.debit}>- ${transaction.debit}</td>
<td className={styles.credit}> ${transaction.credit}</td>
<td>{transaction.balance}</td>
</tr>
))}
</tbody>
</Table>
如果我感到困惑，我很抱歉。這里的輸入是我得到的 e.target.value 和我想在輸入時突出顯示的字母。
謝謝
uj5u.com熱心網友回復：
{input.length
< 1 ? displayTransactions.map(transaction => (
<tr key={transaction._id} className={**className**}>
<td>{transaction.description}</td>
<td>{transaction.date}</td>
<td className={styles.debit}>- ${transaction.debit}</td>
<td className={styles.credit}> ${transaction.credit}</td>
<td>{transaction.balance}</td>
</tr>
))
由于 map() 為陣列中的每個元素回傳（在這種情況下）一個單獨的代碼，因此可以直接定位單獨的代碼給最頂層的標簽（在這種情況下）tr 提供一個 className，然后定位其中的每個值（td）就像我們在任何 css 樣式中所做的一樣！如果您想為輸入的不同值顯示自定義樣式，請使用 javascript 。為自定義樣式中的樣式創建物件，然后使用 javascript dom 或使用 if..else 陳述句獲取表中的值。然后只需將樣式物件的名稱（您使用自定義樣式的位置）指定為樣式或類標記！
幾個月前我確實使用過這種方法來做到這一點。我不知道這是否有效！
uj5u.com熱心網友回復：
您可以td根據搜索詞有條件地將 className 添加到。像下面這樣的東西應該可以作業：
<td className={transaction.description.includes(input) ? styles.highlight: ''}>
{transaction.description}
</td>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367442.html
標籤：javascript css 数组 反应 下一个.js
上一篇：Vue組件無法識別？非常基本的設定。“header”組件已注冊但未使用vue/no-unused-components