我可以取消选中 Datagrid Material-ui 中单击按钮上的选中复选框吗答案

【问题标题】：Can I Uncheck selected checkbox on a Button click in Datagrid Material-ui我可以取消选中 Datagrid Material-ui 中单击按钮上的选中复选框吗
【发布时间】：2021-02-01 12:54:30
【问题描述】：

我在使用复选框的 Datagrid Material-UI 中创建了一个网格。单击复选框后，我想通过单击重置按钮取消选中。

例子：

我正在使用的 DataGrid 代码：

 <DataGrid
                        rows={props.rows}
                        columns={props.columns}
                        onSelectionChange={(newSelection) => {
                            handleSelected(newSelection);
                        }}
                        disableSelectionOnClick
                        checkboxSelection
                        disableColumnMenu
                        pageSize={10}
                    />

注意：props 包含的数据有行和列。我不想重新加载页面，因为该页面还有其他不应重置的数据

【问题讨论】：

您在哪里跟踪检查了哪些行的状态？您的按钮单击处理程序将更新该状态。

标签： javascript reactjs material-ui

【解决方案1】：

您可以在重置按钮的 onClick 属性上将 handleSelected 设置为 []，如下所示：

<Button onClick={() => handleSelected([])} >Reset</Button>

【讨论】：

【解决方案2】：

我有一个要添加到服务器的任务复选框。

我用它来处理检查了哪些任务。

[checkedList, setCheckedList] = useState([]);

我将此作为道具传递给复选框组件

<Checkbox
  onChange={handleChange}
  checked={checkedList.includes(newTask.node)}
/>

export function Checkbox() {
  const [checkedList, setCheckedList] = useState<string[]>([]);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { checked, value } = e.target;
    const tempCheckedList = [...checkedList];

    if (checked) {
      tempCheckedList.push(value);
      setCheckedList(tempCheckedList);
    } else {
      const updatedList = tempCheckedList.filter(
        (taskNode) => taskNode != value
      );
      setCheckedList(updatedList);
    }
  };

  const handleSubmit = (e: SyntheticEvent) => {
    e.preventDefault();
    setCheckedList([]);
  };

  return (
    <FormGroup
      row
    >
      {newTasks.map((newTask) => {
        return (
          <FormControlLabel
            control={
              <Checkbox
                onChange={handleChange}
                checked={checkedList.includes(newTask.node)}
              />
            }
            value={newTask.node}
            label={newTask.node}
            key={newTask.node}
          />
        );
      })}
      <Button
        onClick={handleSubmit}
        variant='contained'
        endIcon={<KeyboardArrowRight />}
        disabled={!checkedList.length}
      >
        Submit
      </Button>
    </FormGroup>
  );
}

【讨论】：