渲染复选框时默认调用函数

Question

this.state.pageData.map((elem) =>
  elem.map((ele) => {
    this.props.AllSelectedFlag ? (
      <Td>
        {' '}
        <Input type="checkbox" value={ele.id} checked={true} onClick={(e) => this.selectHandle(e, ele)} />
      </Td>
    ) : (
      <Td>
        <Input type="checkbox" value={ele.id} onClick={(e) => this.selectHandle(e, ele)} />
      </Td>
    );
  }),
);

基本上我必须在按下全选按钮时检查所有复选框，当按下按钮时我正在更改 AllSelectedFlag 的状态，但问题是当条件为真时 onClick 按钮不起作用。

还有什么办法可以解决吗？

Answer 1

方法 1：如果您有“检查”属性

您不需要为复选框渲染和应用检查属性，您只需在“全部”选择​​和重置时为所有元素设置“已检查”属性。

您可以在每个复选框上添加事件 onChange，用于单独的选中/取消选中部分。

参考示例：https://codesandbox.io/s/vvxpny4xq3

方法 2：如果您在 json 中没有“已检查”属性

维护内部带有“ids”的本地数组并对其进行oncheck/uncheck add/remove，并将其用于处理与检查相关的情况

    const [isCheckAll, setIsCheckAll] = useState(false);
    const [isCheck, setIsCheck] = useState([]);
    const [list, setList] = useState([]);

    const handleSelectAll = e => {
        setIsCheckAll(!isCheckAll);
        setIsCheck(list.map(li => li.id));
        if (isCheckAll) {
          setIsCheck([]);
        }
    };

    const handleClick = e => {
        const { id, checked } = e.target;
        setIsCheck([...isCheck, id]);
        if (!checked) {
          setIsCheck(isCheck.filter(item => item !== id));
        }
    };

参考例子：https://codesandbox.io/s/react-select-all-checkbox-jbub2