在 React 中处理多个复选框答案

【问题标题】：Handle mulitple checkboxes in React在 React 中处理多个复选框
【发布时间】：2022-01-14 20:38:09
【问题描述】：

[更新] 添加代码：https://codesandbox.io/s/withered-cherry-lf9po?file=/src/component/Assign.jsx

在我的课堂项目中，我希望有这样的复选框界面：

当我点击顶部的复选框（分配复选框）时，下面的所有复选框都会被选中。否则，取消选中顶部的复选框，下面的所有选项都未选中

我的方法是创建一个检查状态数组：

const [isChecked, setIsChecked] = useState(
    new Array(4).fill(false)
  );

接下来，处理顶部复选框onChange 事件。我会将所有 isChecked 元素更新为顶部的已检查状态

const assign = () => {
    return (
      <FormControlLabel control={<Checkbox  onChange={(event)=> {
        for(var i = 0; i < 4; i++)
          isChecked[i] = event.currentTarget.checked
        setIsChecked(isChecked)
      }
        }/>} 
      label={<span style={{ fontSize: '0.89rem' }}>
        Assign</span>} />
    )
  }

以下选中状态基于isChecked[] 数组进行更新

const miniAssign = (index) => {
    return (
      <Checkbox {...label} checked={isChecked[index]}/>
    )
  }

这会导致一个问题。当我单击顶部复选框时，未选中以下任何一项。请告诉我这里出了什么问题以及如何解决？

【问题讨论】：

你可以在code sanbox中创建一个项目并分享链接
您可以在 StackOverflow 中找到很多示例和相同的问题...您是否尝试过搜索您的问题？ https://stackoverflow.com/questions/32641541/react-input-checkbox-select-all-component?rq=1
我的代码和：codesandbox.io/s/withered-cherry-lf9po?file=/src/component/…
@MohammadEsmaeilzadeh 是的，我尝试在 stackoverflow 中搜索，但不是我的期望。你能推荐一些吗？

标签： reactjs event-handling

【解决方案1】：

  const assign = () => {
    return (
      <form>
        <label>
          Assign
          <input
            type="checkbox"
            onChange={(event) =>
              setIsChecked(new Array(4).fill(event.currentTarget.checked))
            }
          />
        </label>
      </form>
    );
  };

  const belowAssign = (i) => {
    return (
      <div key={i}>
        <input
          type="checkbox"
          checked={isChecked[i]}
          onChange={(e) =>
            setIsChecked([
              ...isChecked.slice(0, i),
              e.target.checked,
              ...isChecked.slice(i + 1)
            ])
          }
        />
      </div>
    );
  };

  return (
    <div>
      {assign()}
      {isChecked.map((_, i) => belowAssign(i))}
    </div>
  );

【讨论】：