Javascript 不能在组件之间交互

这适用于react JS项目（）。文本框应使用复选框的true/false选中值进行更新，但它不会这样做。有人能解释一下原因吗

var AutoGenerateCheckbox = React.createClass ({
  getInitialState: function() {
    return {checked: false};
  },
  update() {
    this.state.checked = !this.state.checked;
    alert(this.state.checked);
    this.props.onUpdate(this.state.checked);
  },
  render() {
    return (
      <input type="checkbox" checked={this.state.checked} onChange={this.update} />
    );
  }
});

var TBox = React.createClass({displayName: 'TextBox',
  render: function() {
    return (
      <div>
        Checkbox value: {this.props.data}
      </div>
    );
  }
});

var KApp = React.createClass({
  getInitialState: function() {
    return {autoChecked: false};
  },
  handleAutogenChange: function(val) {
    alert('handleAutogenChange:' + val);
    this.setState({autoChecked : val});
  },
  render: function() {
    return (
        <div>
        <AutoGenerateCheckbox onUpdate={this.handleAutogenChange}/>
        <TBox data={this.state.autoChecked}/>
      </div>
    );
  }
});

ReactDOM.render(
  <KApp />,
  document.getElementById('content')
);

var AutoGenerateCheckbox=React.createClass({
getInitialState:函数（）{
返回{checked:false}；
},
更新（）{
this.state.checked=！this.state.checked；
警报（this.state.checked）；
this.props.onUpdate（this.state.checked）；
},
render（）{
返回(
);
}
});
var TBox=React.createClass（{displayName:'TextBox'，
render:function（）{
返回(
复选框值：{this.props.data}
);
}
});
var KApp=React.createClass({
getInitialState:函数（）{
返回{autoChecked:false}；
},
handleAutogenChange:功能（val）{
警报（'handleAutogenChange:'+val）；
this.setState（{autoChecked:val}）；
},
render:function（）{
返回(
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);

React没有确定可打印信息的布尔值，请尝试以下操作：

<div>
    Checkbox value: {this.props.data.toString()}
</div>

复选框值：{this.props.data.toString（）}

您没有看到任何打印内容的原因是您试图在此处打印

布尔值

<div>
    Checkbox value: {this.props.data}
</div>


复选框值：{this.props.data}

试一试


复选框值：{this.props.data.toString（）}

相反

作为额外提示，您实际上不需要将复选框的状态同时保持在其自己的状态和其父组件的状态。实际上，您只需要让它处于父组件的状态

请参阅我制作的。
this.state.checked=！选中了this.state.checked
为什么不使用
setState（）
？@lux直接修改state，因为我刚刚开始学习react，不知道自己在做什么。谢谢你的提示，我会查看设置状态。啊，很酷，因为你在另一个组件中使用了
setState
，所以我很困惑，所以我只是想确保我没有遗漏什么。太棒了，谢谢你的提示。逻辑上，我认为复选框控制着它自己的值。。。我设计它的方式（由家长管理复选框和文本框之间的交互）是最好的方式吗？有没有其他“最佳实践”可以做到这一点？我一直在读关于裁判之类的东西，有点不知所措。复选框真的控制了它自己的值吗？或者该复选框只是一个开关，用于更改应用程序的状态（即
KApp
组件），然后将其向下传播到其子组件？：）关于“最佳方式”部分，你在这里所做的，基本上是国家应该如何从父母流向子女。我想指出的是，复选框和文本框之间实际上没有交互作用，这意味着他们不知道对方的存在，也不关心对方的存在。他们所关心的只是你传递给他们什么样的道具，这样他们就可以基于它们进行渲染。关于refs，这是React的一种方式，允许你获取对放入页面中的实际DOM节点的引用，以防你需要以React事件处理程序不够的方式与之交互（例如将其传递给JQuery）非常感谢米奇，所有这些都是有道理的。非常感谢！
<div>
    Checkbox value: {this.props.data.toString()}
</div>