Состояние флажка Seact-UI React Checkbox не работает

Question

У меня есть родительский контейнер, который вызывает дочерний компонент реагирования на основе классов (так как все документы реагирования на семантический интерфейс написаны с использованием компонентов на основе классов).Дочерний компонент имеет Form.Field:

<Form.Field 
    control={Checkbox} 
    label={{children: 'cardreader'}}
    checked = {this.state.cardReaderChecked}                
    onChange={this.cardReaderToggleHandler}
/>

У меня есть state:

state = {
    cardReaderChecked: false,     
}

и cardReaderToggleHandler:

cardReaderToggleHandler = () => {
    console.log(this.state.cardReaderChecked);
    this.setState((prevState, props) => ({
        cardReaderChecked : !prevState.cardReaderChecked
    }))
console.log(this.state.cardReaderChecked);
}

Я попытался включить this.state.cardReaderChecked, но нашел много ссылок и документов, рекомендующих этот подход с prevState, чтобы избежать задержки при обновлении состояния.

Тем не менее, должна быть логическая ошибка, потому что этоне работаетЕсли я обновлю страницу, checkbox будет сброшен как this.state.cardReaderChecked.

При первом нажатии checkbox он отображается с галочкой, и мои this.state.cardReaderChecked обновляются до true (согласнона мои верные инструменты React в Chrome).Тем не менее, обе console.log распечатки дают мне false, и если я передаю свой state обратно в родительскую форму, это также показывает, что флажок ложен.

Каждый последующий щелчок переключает, но отмечен галочкой checkbox показывает состояние true, но передает false родительской форме (вот где сейчас находится console.log), и наоборот, неотмеченный checkbox возвращает обратно true.

Я почти испытываю желание удалить not из prev.state в setState, но я бы предпочел понять, почему это происходит.

Бонусный вопрос: Как запросить состояние checkbox checked в функциональном компоненте?

Answer 1

передать функцию ребенку в качестве опоры

class Parent extends Component {

  state = {
    cardReaderChecked: false,
  }

  cardReaderToggleHandler = () => {

    this.setState((prevState, props) => ({
      cardReaderChecked : !prevState.cardReaderChecked
    }), () => console.log(this.state.cardReaderChecked))
  }
  ....

  render () {
    return (
     ....
     <Form.Field 
       control={Checkbox} 
       label={{children: 'cardreader'}}
       checked = {this.state.cardReaderChecked}                
       onChange={this.cardReaderToggleHandler}
     />
    )
  }