Question

这是针对反应JS项目（jsfiddle）。文本框应使用复选框的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')
);

Answer 1

React没有将布尔值确定为可打印信息，请改为尝试：

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

Answer 2

您没有看到任何打印出来的原因是因为您尝试在此处打印boolean值

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

尝试

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

代替。

作为额外提示，您实际上不需要在其自己的状态和其父组件的状态中保持复选框的状态。你真的只需要将它放在父组件的状态中。

请参阅我制作的fiddle。

无法在反应组件之间进行交互

2 个答案: