更改 material-ui 开关的选中状态 onChange

Question

我已经实现了 material-ui table，其中有一列为每个 [=25] 呈现 material-ui 开关组件=] 行。我能够使用 table 数据（rowData arg）成功地为开关传递数据，您可以在下面看到。由于每个 material-ui 元素都保持其自己的状态，因此我假设以这种方式设置 'checked' 也会设置状态。我还有一个 handleChange 方法来更改状态 onChange。但是，我看不到 UI.

中发生的切换

  const [switchState, setswitchState] = useState({});
 
  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    setswitchState({ ...switchState, [evt.target.name]: evt.target.checked });
  };

  <MaterialTable
    columns={[
      {
        title: "Name",
        field: "DisplayName",
      },
      {
        title: "Switch Control",
        field: "checked",
        render: (rowData) =>
        <Typography component="div">
          <Grid component="label" container alignItems="center" spacing={1}>
            <Grid item>On</Grid>
            <Grid item>
              <AntSwitch
                name="cb"
                onChange={handleChange}
                checked={rowData.checked}/>
            </Grid>
            <Grid item>off</Grid>
          </Grid>
        </Typography>
      }
    ]}
    data={data}
    options={{
      search: false,
      paging: false,
    }}
  />

我还尝试在每个 row/switch 的渲染上动态设置状态，

const dyCheckState = (rd: any) => {
  setswitchState({ ...switchState, [rd.name]: rd.checked});
  return rd.checked;
};

<AntSwitch
   name={rowData.DisplayName}
   onChange={handleChange}
   checked={dyCheckState(rowData)}
/>

非常感谢任何帮助！谢谢！

Answer 1

设置 switchState 以及 rowData.checked。但是，可以提供更多详细信息的人可以提出您的答案。

     <AntSwitch
        name={rowData.DisplayName}
        onChange={(evt)=>{
          setswitchState({ ...switchState, [evt.target.name]: evt.target.checked });
          rowData.checked = evt.target.checked;
        }}
        checked={rowData.checked}
      />

Answer 2

您应该尝试在状态本身中使用 rowData 而不是直接改变它。

请按照下面给出的例子

 const [rowDataState, setRowDataState] = useState(rowData);


 // Then use rowDataState in here something like this

 <AntSwitch
    name={rowDataState.DisplayName}
    onChange={(evt)=>{
      setswitchState({ ...switchState, [evt.target.name]: evt.target.checked 
      });
      setRowDataState({ ...rowDataState, checked: evt.target.checked }); 
    }}
    checked={rowDataState.checked}
  />

此外，我建议将它们都移动到组件中的不同处理程序函数中，然后将其作为 onChangeHandler 传递给 AntSwitch。

更改 material-ui 开关的选中状态 onChange

Change checked state of a material-ui switch onChange

reactjs

material-ui

react-hooks

react-state

material-table