1

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

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

, 或 , 或在父级中使用非 SVG 元素。尝试使用 React ID ` 检查元素的子节点。不变的.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 组件时，我注意到了两件奇怪的事情：

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

由于某种原因 this.setState 不适用于组件。任何见解将不胜感激！

4

0 回答 0