React Toolbox: состояние флажка не обновляется

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

Uncaught Ошибка: findComponentRoot(..., .0.0.1.1.1:$ripple1.0): невозможно найти элемент. Это, вероятно, означает, что DOM был неожиданно видоизменен (например, браузером), обычно из-за того, что при использовании таблиц забыли, например, вложенные теги

или, или используя не-SVG элементы в родительском элементе. Попробуйте проверить дочерние узлы элемента с React ID ``. invariant.js:39

Мой компонент:

import React from "react";
import { Link } from "react-router";
import { ButtonToolbar, Button } from 'react-bootstrap';
import Checkbox from 'react-toolbox/lib/checkbox';

export default React.createClass({
  getInitialState: function() {
    return {
      consent: false
    };
  },
  handleChange: function(field, value) {
    console.log(this.state);
    console.log(field, value);
    this.setState({ [field]: value });
  },
  render() {
    return (
      <div>
        <h2>Just testing</h2>
        <Checkbox type='checkbox' name='consent' label="I have read and agree to the terms & conditions listed in the PDF in step 2." onChange={this.handleChange.bind(this, 'consent')} checked={this.state.consent} />
      </div>
    );
  }
});

В моей консоли я вижу, что handleChange функция работает:
Object {consent: false} page.js:14
consent true

Когда я использовал React Inspector в Chrome для проверки компонента CheckBox, я заметил две странные вещи:

  • checked свойство НЕ изменяется в родительском компоненте (CheckBox), когда я нажимаю флажок.
  • checked свойство меняется в input элемент внутри этого компонента CheckBox.
  • объект состояния меняется (опять же, согласно моему первому пункту, компонент CheckBox не подчиняется checked={this.state.consent}!)

По какой-то причине this.setState НЕ работает с компонентом. Любое понимание будет оценено!

0 ответов

Другие вопросы по тегам