[反应]当我在输入中输入序列号时，我想在网格的行上添加背景色.我该怎么办

Question

[enter image description here][1]


[1]: https://i.stack.imgur.com/kjrm8.png

当我在下面的输入中输入序列号时，我想更改网格行的背景色。

我将网格数据存储在tableData中。我只使用了过滤器来获取一个数据值，但无法添加背景色。当数字发生变化时，我只想在一行中添加背景色，如何做到这一点？

const [select, setSelect] = useState("");
const numSelect = tableData.filter((rows) => rows.SEQ == select);
// const numSelect = tableData.filter((rows,index) => index +1 == select);

<tbody>
{tableData?.map((el, i) => (
<tr key={i}>
<td>{el.SEQ}</td>
<td>{el.PROD_CODE}</td>
<td>{el.GRADE}</td>
<td>{el.QTY}</td>
<td>{el.PRODDAT}</td>
<td>{el.JPSTSNAME}</td>
<td>{el.OWNNAME}</td>
<td>{el.COLORNAME}</td>
<td>{el.JPSPEC}</td>
</tr>
))}
</tbody>

Answer 1

不一定能理解，但这是我下面理解的方法。

const [select, setSelect] = useState();
const handleSelectedLine = (e) => setSelect(parseInt(e.target.value))
return (
<>
<tbody>
{tableData?.map((el, i) => (
<tr
key={i}
style={{ backgroundColor: select === i + 1 ? 'red' : undefined }}
>
<td>{el.SEQ}</td>
<td>{el.PROD_CODE}</td>
<td>{el.GRADE}</td>
<td>{el.QTY}</td>
<td>{el.PRODDAT}</td>
<td>{el.JPSTSNAME}</td>
<td>{el.OWNNAME}</td>
<td>{el.COLORNAME}</td>
<td>{el.JPSPEC}</td>
</tr>
))}
</tbody>
<input onChange={handleSelectedLine} />
</>
)