Reactjs 更改物料ui开关的选中状态

我已经实现了一个材质ui表，其中有一列为每个表行呈现材质ui开关组件。我能够使用表数据（rowdataarg）成功地为交换机传递数据，如下所示。由于每个material ui元素都保持自己的状态，因此我假设以这种方式设置“checked”也会设置状态。我还有一个handleChange方法，可以在更改时更改状态。但是，我看不到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,
    }}
  />

const[switchState，setswitchState]=useState（{}）；
常量handleChange=（evt:React.ChangeEvent）=>{
setswitchState（{…switchState[evt.target.name]：evt.target.checked}）；
};
在…上
关
}
]}
数据={data}
选择权={{
搜索：假，
分页：false，
}}
/>

我还尝试将每行/开关的渲染状态动态设置为

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

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

constdycheckstate=（rd:any）=>{
设置开关状态（{…开关状态，[rd.name]：rd.checked}）；
返回已检查的rd；
};

---

非常感谢您的帮助！谢谢

设置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}
      />

{
setswitchState（{…switchState[evt.target.name]：evt.target.checked}）；
rowData.checked=evt.target.checked；
}}
checked={rowData.checked}
/>

您应该尝试在状态本身中使用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}
  />

const[rowDataState，setRowDataState]=useState（rowData）；
//然后在这里使用rowDataState
{
setswitchState（{…switchState，[evt.target.name]：evt.target.checked
});
setRowDataState（{…rowDataState，选中：evt.target.checked}）；
}}
checked={rowDataState.checked}
/>

---

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

rowData.checked与switchState的关系如何？我看不到rowData在任何地方更新，只有在某些情况下更新了rowData，才会重新渲染form@Ashu我假设checked=rowData.checked将根据每个开关的“名称”设置开关的状态。这就是我试图在handleChange（）中设置switchState的原因。我还尝试了checked={rowData.checked}，但这不起作用。现在我已经将这两种方法都放在了onChange（）中，现在效果很好。谢谢