Реагируйте: как снять все флажки при сохранении - PullRequest
Новая
       12

Реагируйте: как снять все флажки при сохранении

0 голосов
/ 27 апреля 2020

Я пытаюсь создать форму аудита, чтобы составить список пациентов и какие у них предупреждения. Когда я нажимаю кнопку «Сохранить пациента», я хочу, чтобы все флажки были сняты / сброшены, но я не могу понять это. Я установил состояние предупреждений обратно в пустой массив, но флажки все еще отмечены. Любая помощь будет удивительной, поскольку я новичок в 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;

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Вам необходимо добавить проверенное свойство к каждому флажку и проверить, существует ли этот элемент в вашем штате. Проверьте документы по формы и ознакомьтесь с контролируемыми компонентами. Реакция документов потрясающая и очень мне помогла.

Вот возможное решение: 

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

Затем, после сохранения, вам нужно обработать данные формы и затем вернуть список предупреждений обратно. в пустой массив.

Надеюсь, это поможет!

0 голосов
/ 27 апреля 2020

Вы можете сохранить отмеченные или непроверенные значения флажков в состоянии, и после сохранения вы можете установить состояние как ложное для всех флажков

...