Uncaught TypeError: Невозможно прочитать свойство 'name' из неопределенного [antdesign - switch]

Question

Я хочу использовать событие как обратный вызов в переключателе antd. Я не знаю, как получить значение this.state.game, используя событие.

handleToggle = event => {
     this.setState({
         [event.target.name]: !this.state[event.target.name]
     });
};

   render() {
     return(
        <Switch 
            checkedChildren='on' 
            unCheckedChildren='off' 
            name='game' value={this.state.game} 
            onClick={this.handleToggle}
        />
    );
}

Answer 1

Переключатель onClick подпись:

Function(checked: boolean, event: Event)

Так должно быть:

handleToggle = (_, event) => {
  this.setState({
    [event.target.name]: !this.state[event.target.name]
  });
}

т.е. event является вторым аргументом.

Answer 2

вам не нужно добавлять проп value к Switch.

class App extends Component {
  state = {
    game: false
  };

  handleToggle = (checked, event) => {
    this.setState({
      game: checked
    });
  };

  render() {
    const { game } = this.state;
    console.log("switch status: ", game);
    return (
      <div className="App">
        <Switch
          defaultChecked={false}
          checkedChildren="on"
          unCheckedChildren="off"
          name="game"
          onClick={this.handleToggle}
        />
      </div>
    );
  }
}

вот краткое демо код песочницы