Хорошо, я постараюсь сделать это быстро, потому что СЛЕДУЕТ быть легким решением...
Я прочитал кучу подобных вопросов, и ответ кажется вполне очевидным. Ничто из того, что мне когда-либо понадобилось бы в первую очередь искать! Но... У меня есть ошибка, которую я не могу понять, как исправить или почему это происходит.
Как следует:
class NightlifeTypes extends Component {
constructor(props) {
super(props);
this.state = {
barClubLounge: false,
seeTheTown: true,
eventsEntertainment: true,
familyFriendlyOnly: false
}
this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange = (event) => {
if(event.target.className == "barClubLounge") {
this.setState({barClubLounge: event.target.checked});
console.log(event.target.checked)
console.log(this.state.barClubLounge)
}
}
render() {
return (
<input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
)
}
Больше кода окружает это, но в этом моя проблема. Должен работать, да?
Я также пробовал это:
handleOnChange = (event) => {
if(event.target.className == "barClubLounge") {
this.setState({barClubLounge: !this.state.barClubLounge});
console.log(event.target.checked)
console.log(this.state.barClubLounge)
}
Итак, у меня есть те два console.log()
, оба должны быть одинаковыми. Я буквально устанавливаю состояние так же, как event.target.checked
в строке над ним!
Но он всегда возвращает противоположность тому, что ему нужно.
То же самое происходит, когда я использую !this.state.barClubLounge
; Если он начинается с false, мой первый клик остается ложным, даже если флажок установлен или нет на основе состояния!!
Это сумасшедший парадокс, и я понятия не имею, что происходит, пожалуйста, помогите!