reactjs - React:如何在保存时取消选中所有复选框
问题描述
我正在尝试创建一个审核表来列出患者以及他们有哪些警报。当我单击“保存患者”按钮时,我希望所有复选框都取消勾选/重置,但我无法弄清楚。我已将警报状态设置回一个空数组,但复选框仍处于选中状态。任何帮助都会很棒,因为我是 React 新手 :)
class AuditForm extends Component {
state = {
hospitalNum: []
alerts: [],
list: [],
};
render() {
const { alerts } = this.state;
return (
<div>
<Form>
<Form.Row>
<Form.Group>
<Form.Label>Hospital Number</Form.Label>
<Form.Control
value={this.state.hospitalNum}
type="string"
onChange={this.handleHospNumChange}
/>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Check
onChange={(e) => {
this.updateAlertList(e, "MRSA");
}}
inline
label="MRSA"
type="checkbox"
id="MRSA"
/>
<Form.Check
onChange={(e) => {
this.updateAlertList(e, "cDiff");
}}
inline
label="cDiff"
type="checkbox"
id="cDiff"
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={this.saveData}>
Save patient
</Button>
</Form>
</div>
);
}
saveData = (e) => {
e.preventDefault();
this.setState((currentState) => {
return {
hospitalNum: [],
alerts: [],
list: [
...currentState.list,
{
hospitalNum: currentState.hospitalNum,
alerts: currentState.alerts,
},
],
};
});
};
handleHospNumChange = (e) => {
this.setState({ hospitalNum: e.target.value });
};
updateAlertList = (e, alert) => {
if (e.target.checked === false) {
const filteredAlerts = this.state.alerts.filter(
(prevAlert) => prevAlert !== alert
);
this.setState({ alerts: filteredAlerts });
} else {
this.setState((prevState) => {
return {
alerts: [...prevState.alerts, alert],
};
});
}
};
}
export default AuditForm;
解决方案
您可以将复选框的选中或未选中值存储在状态中,保存后您可以将所有复选框的状态设置为 false
推荐阅读
- spring-webflux - 如何在 webflux 客户路由器上写:get post
- angular - 无法折叠/展开材质树(Angular 6)
- asp.net-web-api - ASP.NET WebHooks - 版本控制
- swift - 带有登录屏幕的选项卡应用程序中的右侧菜单
- eclipse-hono - Eclipse-hono MQTT 适配器:无法处理消息
- sql - 如何在给定条件下获取周数
- javascript - 如何使用jquery动态添加行?
- android - 在 Kotlin 中未触发 LiveData 观察者
- dart - 如何在颤动中实现字母滚动
- visual-studio - Visual Studio 无法附加到 coreCLR。访问被拒绝