编辑

Question

由于某种原因，每次在devicesKeys数组中存在一个值时，程序都会崩溃：“复选框定义了无效的contextType”以及“未捕获的TypeError：无法读取未定义的属性'indexOf'”

注意：在测试中，我确保“ devicesKeys”数组从不处于未定义状态。似乎是一个反应性上下文问题，但我不知道如何解决。

这是代码： https://codesandbox.io/s/youthful-tharp-bmdw4?file=/src/App.js

原始文档：https://ant.design/components/checkbox/#components-checkbox-demo-check-all

Answer 1

我不确定您为什么要使用CheckBoxGroup，可以通过使用表上的rowSelection属性来实现它：

return (
    <Table
      columns={columns}
      dataSource={devices}
      rowSelection={{ onSelectAll: onCheckAllChange }}
      pagination={false}
    ></Table>
);

，回调将为：

function onCheckAllChange(selected, selectedRows, changeRows) {
    setCheckState({
      checkedList: selected ? devicesKeys : [],
      indeterminate: false,
      checkAll: selected
    });
}

检查此codesandbox。

编辑

建议的方法有效，但已弃用，因此建议的方法使用“ onChange”回调。

这是表格：

<Table
  columns={columns}
  dataSource={devices}
  rowSelection={{ onChange }}
  pagination={false}
/>

回调：

function onChange(checkedList, selectedRows) {
  setCheckedList(checkedList);
}

这是新版本的最小沙箱： https://codesandbox.io/s/quirky-butterfly-9c52v?file=/mytable.js

如何在React挂钩中使用CheckAll复选框创建复选框？

1 个答案:

编辑