реагировать bootstrap флажок проблема

Question

С помощью response- bootstrap я хочу, чтобы в моей форме был установлен флажок, если мое «неактивное» значение истинно; а не когда это ложно. Поэтому я установил для отмеченного атрибута довольно простую строку:

checked={inactive}

Однако я получаю эту ошибку, когда нажимаю флажок: "Предупреждение: получена строка false для логического атрибута checked. Браузер интерпретирует его как истинное значение. Вы имели в виду флажок = {false}? "

Вот соответствующий код:

render() {
  const {
    inactive,
    ...
  } = this.state;

  return (
    <Form.Group as={Row}>
      <Form.Label>Inactive<Form.Label>
      <Col>
        <Form.Check
          type="checkbox"
          checked={this.state.inactive}
          onChange={() => {
            if (inactive === 'false') {
              this.setState({ inactive: 'true' });
            } else {
              this.setState({ inactive: 'false' });
            }
          }}
        />
      </Col>
    </Form.Group>
    );
  } 
}

Итак, я изменил проверенный атрибут к следующему. Но в этом случае значение не устанавливается правильно, когда ложно:

...
      checked={inactive === 'true'}
...

Answer 1

если ваше состояние таково:

state={
inactive:false,
....
}

Удалите де-структурирование этого объекта:

const {
    inactive,
    ...
  } = this.state;

и внесите изменения как это

 <Form.Check
          type="checkbox"
          checked={this.state.inactive}
          onChange={() => {
            this.setState({ inactive: !this.state.inactive });
          }}
        />

Я надеюсь это помогает!

Посмотри эту песочницу

Answer 2

Вы должны указать:

this.state = {
          inactive: false
}

и удалить этот деструктурирующий объект:

const {
inactive,
...
} = this.state;

Еще одна оптимизация, чтобы избежать if-else ...

onChange={()=>this.setState({
    inactive: !this.state.invactive
)}