Question

Example Table multiple columns of checkboxes

想象一下，我有一个包含多列的表。有些列完全由复选框组成。你将如何管理该表的状态？

当我单击一个复选框时，我想我会发送一个动作来更新redux状态，其中包含该列的一些唯一标识符，然后是行的索引。例如：

column1: [0,1,5,10] column2: [2,3,6]

如果我点击column2，第1行，第2列将更新为：

column2: [0,2,3,6]

其中列＃是该列的键，并且数组中的每个数字都是行。

Answer 1

行通常用于表示对象的实例。您已经通过使用列来表示您的实例来解决这个问题。即使您的表是静态的，我也不会尝试表示列，而是代表行：

var data = [
  [false, false, false, true],
  [false, false, true, true]
];

这可以更加干净地与React一起使用：

{data.map(row => {
  return (
    <tr>
     <td><input type="checkbox" checked="{row[0] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[1] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[2] ? 'checked' : ''}"/></td>
     <td><input type="checkbox" checked="{row[3] ? 'checked' : ''}"/></td>
   </tr>);
})}

Answer 2

您还可以将数据组织为一个对象： let data = [ { columnOne: true, columnTwo: false, columnThree: true, columnHundred: 42 }, { columnOne: true, columnTwo: false, columnThree: true, columnHundred: 0 }, { columnOne: false, columnTwo: false, columnThree: true, columnHundred: 42 }, ]

然后您可以更新data数组

React / Redux - 使用多列复选框管理表的状态

2 个答案: