ReactJS无需React Table实现可选中表格行并添加选中边框的方法

步骤1：同步勾选状态 #

你的toggleCheckbox方法需要采用不可变方式更新allHotels数组，保证对应行的checked属性实时更新触发组件重渲染：

const toggleCheckbox = (index: number) => {
  setAllHotels(prev => {
    const newList = [...prev]
    newList[index] = {
      ...newList[index],
      checked: !newList[index].checked
    }
    return newList
  })
}

步骤2：修改TableRow渲染逻辑 #

根据当前行的checked状态动态绑定样式类，同时把非受控的defaultChecked改为受控的checked属性，避免状态不同步的问题：

<tbody>
  {allHotels.map((p: any, index: number) => (
    <TableRow 
      key={p.id} 
      selectRow={true}
      className={p.checked ? 'row-selected' : ''}
      {/* 额外加这行可以实现点击整行也能勾选的效果 */}
      onClick={() => toggleCheckbox(index)}
    >
      <td>
        <input 
          type="checkbox" 
          checked={p.checked} 
          onChange={() => toggleCheckbox(index)}
          onClick={e => e.stopPropagation()} {/* 阻止冒泡避免触发两次勾选 */}
        />
      </td>
      <td>{p.name}</td>
      <td>{p.address}</td>
      <td>{p.rating}</td>
    </TableRow>
  ))}
</tbody>

如果你用的组件库的TableRow有内置的选中样式属性，也可以直接传属性值替代自定义类名。

步骤3：添加边框样式 #

要让表格行的边框生效，需要先给外层table设置border-collapse: collapse，再写选中行的样式：

table {
  border-collapse: collapse;
  width: 100%;
}
.row-selected {
  border: 2px solid #1677ff; /* 可自定义边框颜色、粗细、样式 */
  background-color: #e6f4ff; /* 可选：加个背景色区分更明显 */
}
td {
  padding: 8px 12px;
  border: 1px solid #f0f0f0;
}

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