反应：如何取消选中保存时的所有复选框

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。>