如何解决更改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}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。