当呈现复选框时，默认情况下调用函数

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的状态，但问题是当条件为true时，onClick按钮不起作用。

有其他方法可以解决这个问题吗？

Answer 1

方法1：如果你有"已检查"；属性

您不需要渲染和应用复选框的复选属性，只需要设置"即可；"已检查"；"上所有元素的属性；所有"；选择和重置。

您可以在每个复选框上添加事件onChange，这些复选框将用于单个选中/取消选中零件。

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

方法2：如果你没有；"已检查"；json 中的属性

用"；ids"；内部，并从中取消选中/取消选中添加/删除，并将其用于处理与检查相关的情况

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