复选框不与Material-UI一起在React中切换 [英] Checkbox not toggling in React with Material-UI

问题描述

因此，我有一个React代码，当我单击该复选框时，该复选框不会切换.

这是codesandbox链接:

您可以并且应该考虑 visibleColumns 状态初始化程序和效果回调之间的通用逻辑.

So I have a React code in which the checkbox is not toggling when I click on it.

This is the codesandbox link: https://codesandbox.io/s/inspiring-kirch-q6p4h

I am initializing the checkbox state like this:

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

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

We have a column array in which there is a function called customElement which contains the checkbox handler.

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"
    }
  ];

Checkbox toggle is handled in the function below:

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

What is happening is that the checkbox is not toggling when I click on it. Any idea what is going on?

解决方案

I dug in on this a bit and after converting handleChange to use a functional state update

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

to try and avoid any stale enclosures with the columns prop passed to ThanosTable I dug in on that component code to see if/how it handled re-enclosed checkbox values passed in the columns prop.

Issue

The columns are stored in local state in the visibleColumns state and never again does ThanosTable look at and respond to changes on the columns prop.

Solution

Add an useEffect to update the visibleColumns state when props update.

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

You can, and should, factor the common logic between the visibleColumns state initializer and effect callback.

这篇关于复选框不与Material-UI一起在React中切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！