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.
2 odpowiedzi
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.
selectOngoingAlerts = (e) => {
const {isChecked} = this.state;
this.setState({ isChecked : !isChecked });
isChecked ? console.log('on') : console.log('off');
}