Question

所以我有一个来自react工具箱库的简单Checkbox组件，当我点击它时，我可以看到复选框从选中复选到未选中，但在控制台中我每次点击它时都会看到这些错误：

未捕获错误：findComponentRoot（...，.0.0.1.1.1：$ ripple1.0）：无法使用   找到元素。这可能意味着DOM意外地发生了变异   （例如，通过浏览器），通常是由于在使用时忘记了   表，嵌套标签，如

，或者使用非SVG   父母中的元素。尝试检查。的子节点   具有反应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

当我在Chrome中使用React Inspector检查CheckBox组件时，我发现了两件奇怪的事情：

当我点击复选框时，checked属性在父组件（CheckBox）中没有变化。
checked属性在此CheckBox组件中的input元素中发生变化。
状态对象正在改变（再次根据我的第一点，CheckBox组件不服从checked={this.state.consent}！）

由于某种原因，this.setState不对该组件起作用。任何见解都将不胜感激！

React Toolbox：复选框状态未更新

0 个答案: