呈现复选框时默认调用函数

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>
    );
  }),
);

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

还有其他解决方法吗？

Answer 1

方法 1：如果您已“选中”属性

您不需要为复选框呈现和应用检查属性，您只需要为“所有”选择和重置的所有元素设置“已检查”属性。

并且您可以在将用于单个 check/uncheck 部分的每个复选框上添加事件 onChange。

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

方法 2：如果您没有在 json

中“检查”属性

维护内部和内部带有“ids”的本地数组check/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

呈现复选框时默认调用函数

Call function on default when checkboxes are rendered

javascript

foreach

reactjs

redux-saga

react-redux