在 React 中处理多个复选框

Question

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

在我的 class 项目中，我想要这样的复选框界面：

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

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

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]}/>
    )
  }

这就导致了一个问题。当我点击顶部的复选框时，下面的 none 被选中。请告诉我这里出了什么问题以及如何解决？

Answer 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>
  );

在 React 中处理多个复选框

Handle mulitple checkboxes in React

event-handling

reactjs