Обрабатывать onChange для флажка

Question

У меня есть состояние, которое false по умолчанию. Когда флажок установлен, я хочу, чтобы состояние стало true.

state = {
    status: false,
}

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


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    value={this.state.status}
    onChange={this.handleChange} />

Состояние не меняется, когда я нажимаю на флажок. Это всегда ложь.

Answer 1

Может быть, вы можете попробовать так:

state = {
 status: false,
}

handleChange = (event) => {
 this.setState({
  status: event.target.checked
 });
}


<Form.Check
 type="checkbox" 
 label="Consigne temporaire"
 value={this.state.status}
 onChange={this.handleChange} />

Answer 2

Попробуйте установить checked prop вместо value:

<Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    checked={this.state.status}
    onChange={this.handleChange} />

Answer 3

Я думаю, что на самом деле есть две проблемы.

1. Вы должны использовать event.target.checked
2. Вы должны проверить флажок свойство

Убедитесь, что вы установили идентификатор на "статус "на вашем флажке.

state = {
    status: false,
}

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


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    checked={this.state.status}
    onChange={this.handleChange} />

Answer 4

Флажок должен просто переключать значение boolean в state, что имеет смысл, потому что это контролируемый вход. Попробуйте что-то вроде этого:

state = {
    status: false,
}

handleChange = (event) => {
    this.setState((prevState) => {
       return {
          ...prevState,
          status: !prevState.status
       }
    })
}


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    value={this.state.status}
    onChange={this.handleChange}
 />

Answer 5

Измените event.target.id на status
state = {status: false,}

handleChange = (event) => {
    this.setState({
      status: event.target.value
    });
}


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    value={this.state.status}
    onChange={this.handleChange} />