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 НЕ работает с компонентом. Любое понимание будет оценено!