React中输入序号时如何为表格对应行添加背景色？

你不需要用filter筛选数据，直接在遍历表格行时判断当前行的SEQ是否和输入序号匹配，动态设置行的背景色即可。下面是两种实现方式：

方式一：内联样式直接实现 #

直接在<tr>标签里通过条件判断设置style属性：

const [select, setSelect] = useState("");
// 无需filter，渲染时直接判断即可

<tbody>
  {tableData?.map((el, i) => (
    <tr 
      key={i}
      style={{ 
        backgroundColor: el.SEQ == select ? '#f0f8ff' : 'transparent'
      }}
    >
      <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>

方式二：CSS类分离样式逻辑 #

先定义CSS类：

.highlight-row {
  background-color: #f0f8ff;
}

再在渲染时动态添加类：

<tbody>
  {tableData?.map((el, i) => (
    <tr 
      key={i}
      className={el.SEQ == select ? 'highlight-row' : ''}
    >
      <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>

关键注意点 #

• select是字符串类型（初始值为""），如果el.SEQ是数字，用==可自动做类型转换；也可以显式转字符串避免类型问题：el.SEQ.toString() === select
• 之前用filter拿到的numSelect是匹配数据的数组，但无法直接关联到具体表格行，遍历行时直接判断是更高效的实现方式

内容的提问来源于stack exchange，提问作者jun