Как мне установить значение true при проверке и false при отключении

Question

Я разрабатываю приложение React с флажком. Я хотел бы добавить флажок, который отправляет истину, если установлен, и ложь, когда флажок не установлен. мой onChange:

handleChange = (e) => {
    this.setState({
        [e.target.id]: e.target.value
    })
}

И ввод:

<label>
   <input type="checkbox" class="filled-in" value="true" id="My Value" 
     onChange={this.handleChange} />
    <span>My Value</span>
</label>

В моем состоянии:

   state = {
        My Value = ''
             }

Когда я отправляю с установленным флажком, он работает хорошо. Проблема в том, что когда я проверяю и снимаю флажок, значение остается истинным, а не меняется на ложное. Как я могу это исправить. Пожалуйста, помогите.

Спасибо.

Answer 1

Обновить обработчик для использования проверенного значения из события

handleChange = e => {
  this.setState({
    [e.target.id]: e.target.checked
  });
};

И не жестко кодировать проверенное значение ввода

<label>
  <input
    type="checkbox"
    className="filled-in"
    value={this.state['My Value']}
    id="My Value"
    onChange={this.handleChange}
  />
  <span>My Value</span>
</label>

Answer 2

Замените value="true" на value={this.state["My Value"]}