Question

我在React上遇到一个奇怪的问题，一个用fixed-data-table生成的表，其行依赖于计算的状态变量。

每个行都有一个复选框，以便能够批量选择数据。当按下一个按钮时，所有检查的行都会隐藏，这时会出现问题：如果检查了顶行而下面的那行没有，那么当表格被重新渲染时，顶行复选框仍保持选中状态 （在隐藏了原始顶行之后）。

显示数据的常规列是动态生成的，但带有复选框的列生成如下：

<Column
 width={75}
 header={<Cell>Check</Cell>}
 columnKey="selectCol"
 cell={({rowIndex, ...props}) => (
  <Cell>
   <input type="checkbox" onChange={(e) => {
     var chk = e.target;
     {/* stuff that doesn't affect whether it's checked or not when rendered */}
    }}
  </Cell>
 )}
/>

任何人都知道会发生什么？非常感谢你

Answer 1

您需要设置每个复选框的值。我的意思是在每个复选框的初始状态使其为false。然后在onchange发生时，使目标事件成为现实。因此，无论何时动态生成都有复选框对象，每个单元格都有一个唯一的id，根据您的选择对应某个值（initialState = true / false）。之后，根据您的选择不断更新状态。

表格顶行（固定数据表）上的React Redux复选框保持选中状态

1 个答案: