Question

我正在尝试创建审核表以列出患者列表以及他们有哪些警报。当我单击“保存患者”按钮时，我希望所有复选框都自己取消显示/重置，但我无法弄清楚。我已将警报状态设置回一个空数组，但复选框仍处于选中状态。当我刚接触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;

Answer 1

您可以在状态中存储复选框的选中或未选中值，保存后可以将所有复选框的setState设置为false

Answer 2

您需要向每个复选框添加一个选中的属性，并检查该项目是否在您的状态下存在。查看forms上的react文档，并阅读受控组件。 react文档很棒，对我帮助很大。

这是一个可能的解决方案：

<Form.Check
   onChange={(e) => {
     this.updateAlertList(e, "cDiff");
   }}
   inline
   label="cDiff"
   type="checkbox"
   id="cDiff"
   checked={this.state.alerts.includes("cDiff")}
/>

保存后，您需要处理表单数据，然后将警报列表设置回一个空数组。

希望有帮助！

React：如何在保存时取消选中所有复选框

2 个答案: