Question

我正在尝试使用父控件来控制编辑器组件和保存组件。父组件具有以下功能：

constructor() {
  super();
  this.state = {
    code: "",
    current_program: 'new'
  }
}

updateCode(event) {
  this.setState({
    code: event
  });
}

save() {
  console.log(this.state.code);
}

在它的渲染组件中，我有这个：

<IDE code={this.state.code} updateCode={this.updateCode}/>
<Browser save={this.save.bind(this)} programs={this.props.programs} />

IDE成功调用update，当我从父级的updateCode函数记录输出时，它可以正常工作。但是......在我的浏览器组件中，我有以下内容：

<Button className="width-30" bsStyle="primary" onClick={() => this.props.save()}>
  <Glyphicon glyph="save" /> Save
</Button>

单击时，它会打印“”，这是否与我在父状态中的代码更新之前绑定“this”的事实有关？它只是打印旧状态吗？我怎样才能让它更新？感谢。

编辑：我是从IDE组件调用它：onChange={this.props.updateCode.bind(this)}

Answer 1

解决了它：我在IDE组件中绑定了CHILD的状态，这意味着正在更新，将父组件中IDE组件的实现更改为以下内容：<IDE code={this.state.code} updateCode={this.updateCode.bind(this)}/>，允许状态正确更新

从子项打印父状态的麻烦（ReactJS）

1 个答案: