React Components：在兄弟姐妹之间传递状态变化的数据

Question

我正在 App comp 中的两个子组件之间共享一个事件

应用比较

class App extends Component {        
      constructor(props) {
      super(props);
      this.state = { A : 'good'  };
    }    

 SharedEvent () {

 var newvalue =  this.setState({A:'update'}, () => {
    console.log(this.state);
    alert(this.state.A)
});
    }
      render() {
        return (        
      <div className="App">             
      <Content child1Event = {this.SharedEvent} text = {this.state.A}    
               child2Event = {this.SharedEvent} />            
         </div>
    );
  }
}

母公司

render(props) {
    return (
      <div className = "App">           

      <Subcontent whatever = {this.props.child1Event} name = {this.props.text}  />

      <Subcontent2 whatever = {this.props.child2Event}   />    

       </div>
    );
  }
}

儿童比赛

  constructor(props) {
    super(props);
    this.state = {  };
  }
  render() {
    return (
      <button id = 'btn' onClick = {this.props.whatever.bind(this , 'shared')} > {this.props.name} </button>
    );
  }
}

subcontent2 与 subontent 相同

我可以从两个组件成功触发 sharedEvent，但它应该更改 setstate 上的按钮名称，但它没有，我哪里错了？？？

Answer 1

问题可能来自以下两个问题之一：

首先，您应该将 SharedEvent(){} 函数替换为 SharedEvent = ()=>{...you function code}，这是因为范围已更改，如果您指的是 this 在你的组件中调用它的函数之一，你应该使用箭头函数或者像你所做的那样定义它们并将它们绑定到你的构造函数中 this 你有未完成。
其次，按钮上的 onClick 事件按其默认行为重新启动页面，所有内容都像您的组件状态一样刷新，这可能是您看不到文本更改的原因，因为页面刷新并且状态返回 'good'，因此请尝试用此替换您的 onClick 函数：
```
<button onClick={e => {e.preventDefault(); this.props.whatever();}}> {this.props.name} </button>
```

React Components：在兄弟姐妹之间传递状态变化的数据

React Components: Pass data between siblings on state change

reactjs

react-component