更改Material-UI开关的已检查状态onChange

问题描述

我已经实现了material-ui表，该表的一列为每个表行提供了material-ui开关组件。我可以使用表数据（rowData arg）成功传递交换机的数据，如下所示。由于每个material-ui元素都保持其自己的状态，因此我假设以这种方式设置“ checked”也设置了状态。我也有一个handleChange方法来更改状态onChange。但是，我看不到用户界面中正在发生切换。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input_email" type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
                    title="{{emailAddress}}" #email="ngModel" multiple
                    pattern="^(([a-zA-Z0-9_,.]*@*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
                    class="form-control" />

我还尝试了动态设置每个行/开关的呈现状态，

  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,}}
  />

非常感谢您的帮助！谢谢！

解决方法

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

,

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