Функция onChange на флажок не работает | ReactJS - PullRequest
Новая
       8

Функция onChange на флажок не работает | ReactJS

0 голосов
/ 16 января 2020

Я учусь ReactJS, и сегодня я не могу решить проблему, поэтому мне нужна ваша помощь.

Я хочу сделать «Помни меня» для пользователей, которые хотят оставаться на связи после повторного открытия на сайте.

Это мой код:

Моя функция: 

handleChangeCheckBox = (event) => {
  console.log(event.target.checked)

  this.setState({
    isChecked: event.target.checked
  })
}

Когда я вызываю функцию в поле ввода флажок с onChange: 

<p>
  <Input
    type="checkbox"
    name="rememberCheckbox"
    className="rememberCheckbox"
    id={this.state.isChecked}
    onChange={this.handleChangeCheckBox}
  />
  Remember Me
</p>

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

Ответы [ 3 ]

0 голосов
/ 16 января 2020

Добро пожаловать в переполнение стека!

В зависимости от кода, которым вы поделились, ваша функция должна выполняться. Я подозреваю, что у вас есть ошибка где-то еще в вашем классе, а не в тех двух фрагментах кода, которыми вы поделились.

Вы можете проверить эту простую песочницу, которую я сделал, с очень простой реализацией, такой как у вас: https://codesandbox.io/s/react-simple-check-box-7etp4

Одна вещь, которую вы упускаете, - это использование checked html атрибут, а не id. Это то, что сообщит чекбоксу, проверено оно или нет. Он заменяет атрибут value, который вы используете для полей ввода.

Кажется, вы также используете компонент Input. Попробуйте изменить его на обычный HTML input.

0 голосов
/ 17 марта 2020

пожалуйста, попробуйте это. заменить value на checked

<input type="checkbox" 
    name="rememberCheckbox"
    checked={this.state.isChecked}
    onChange={this.handleCheckBox}
/>
0 голосов
/ 16 января 2020

Код проверен по указанному адресу введите описание ссылки здесь 

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isChecked: false };
  }

  handleCheckBox = event => {
    console.log(event.target.checked);

    this.setState({
      isChecked: event.target.checked
    });
  };

  render() {
    return (
      <div>

       <p>
          <input
            type="checkbox"
            name="rememberCheckbox"
            value={this.state.isChecked}
            onChange={this.handleCheckBox}
          />
          Remember Me
        </p>
      </div>
    );
  }
}
...