使用 Material-UI 在 React 中不切换复选框

IT技术 javascript reactjs material-ui

2021-05-10 00:57:23

所以我有一个 React 代码，其中的复选框在我单击时不会切换。

这是codesandbox链接：https ://codesandbox.io/s/inspiring-kirch-q6p4h

我正在像这样初始化复选框状态：

const [checkbox, setCheckBox] = useState(() => {
    let checkboxObj = {};

    rows.forEach((e) => {
      checkboxObj[e.id] = false;
    });
    return checkboxObj;
  });

我们有一个列数组，其中有一个名为 customElement 的函数，其中包含复选框处理程序。

const columns = [
    {
      key: "Source_campname",
      title: "TS Camp Name",
      customElement: function (row) {
        console.log(checkbox);
        return (
          <FormControlLabel
            control={
              <Checkbox
                checked={checkbox[row.id]}
                key={row.id}
                onChange={() =>
                  handleChange(row.Source_campname, row.id, checkbox)
                }
                name={row.id}
              />
            }
            label={[row.Source_campname]}
          />
        );
      }
    },
    {
      key: "Tracker_campname",
      title: "TR Camp Name"
    }
  ];

复选框切换在以下函数中处理：

const handleChange = (name, campid) => {
    setCheckBox({ ...checkbox, [campid]: !checkbox[campid] });
  };

发生的事情是当我点击它时复选框没有切换。知道发生了什么吗？

2个回答

在转换handleChange为使用功能状态更新后，我对此进行了深入研究

const handleChange = (name, campid) => {
  setCheckBox((checkbox) => ({
    ...checkbox,
    [campid]: !checkbox[campid]
  }));
};

为了尝试避免columns传递给props的任何陈旧外壳，ThanosTable我深入研究了该组件代码，以查看它是否/如何处理columnsprops中传递的重新封闭的复选框值。

问题

将columns存储在本地状态的visibleColumns状态，不会再不会ThanosTable看和应对上进行更改columnsprops。

解决方案

添加一个useEffect以visibleColumns在props更新时更新状态。

useEffect(() => {
  setVisibleColumns(
    !options.removeColumnsFeature &&
    options.showColumns &&
    options.showColumns.length
    ? [...columns.filter((x) => options.showColumns.includes(x.key))]
    : [...columns]
  )
}, [columns, options]);

您可以并且应该考虑visibleColumns状态初始值设定项和效果回调之间的通用逻辑。

不要在useState声明中使用回调

示例 Codesanbox

const [checkbox, setCheckBox] = useState({});

其它你可能感兴趣的问题

上一篇如何将excelsheet行高设置为auto，以便内容可以使用exceljs自动适应单元格下一篇Django + ReactJS。Httponly cookie 不会保存在 React 端的浏览器中。我也在两边都给了 {withcredentials : true}