Chcę tylko uzyskać wartość z komponentu radiowego (zaznaczonego lub niezaznaczonego) w semantycznym interfejsie użytkownika z następującym kodem:

  componentDidMount() {
    this.setState({
      startDate: moment()
        .subtract(30, 'days')
        .startOf('day'),
      endDate: moment().endOf('day'),
      isChecked: false,
    });
  }

Komponent radiowy:

<Radio toggle className="ongoing-checkbox"
  label="Show ongoing alerts"
  value={ !this.state.isChecked }
  onChange={e => this.selectOngoingAlerts(e)}></Radio>

I funkcja obsługi:

selectOngoingAlerts = (e) => {
  this.setState(this.state.isChecked = true);
  const { householdAlerts } = this.props;
  console.log('checked', this.state.isChecked);
}

Jak uzyskać stan komponentu radiowego w funkcji selectOngoingAlerts? Chcę wykonać różne czynności w odniesieniu do tego, czy radio jest zaznaczone, czy odznaczone.

1
Tomasz Waszczyk 23 marzec 2020, 20:01

2 odpowiedzi

Najlepsza odpowiedź

Musisz zaakceptować dane / sprawdzoną wartość z drugiego argumentu wywołania zwrotnego onChange. Próbowałeś również przypisać wartość w setState, co jest błędne. zrób to tak, jak robisz w swoim componentDidMount

selectOngoingAlerts = (e, data) => {
  this.setState({isChecked: data});
}

Zaktualizuj również komponent radiowy, aby po prostu przekazał wywołanie zwrotne do twojego programu obsługi, nie potrzebujesz ani nie chcesz tutaj lambda.

<Radio toggle className="ongoing-checkbox"
  label="Show ongoing alerts"
  value={ !this.state.isChecked }
  onChange={this.selectOngoingAlerts} />

W dokumentach drugi argument to miejsce, w którym przekazywana jest wartość

Powinieneś odwoływać się do Checkbox dokumentów, takich jak link, ponieważ Radio jest cukrem składniowym dla <Checkbox radio />

Pamiętaj: setState jest asynchroniczny, więc nie możesz console.log takiej wartości, jak chcesz. Zamiast tego użyj wywołania zwrotnego w setState, jeśli naprawdę chcesz zobaczyć jego zaktualizowaną wartość, lub po prostu przenieś console.log do renderowania, aby zobaczyć zmianę wartości w cyklach renderowania.

2
John Ruddell 23 marzec 2020, 17:10
selectOngoingAlerts = (e) => {
  const {isChecked} = this.state;
  this.setState({ isChecked : !isChecked });
  isChecked ? console.log('on') : console.log('off');
}
0
Andrey Kuznetsov 23 marzec 2020, 17:11