Reactjs 反应组件：在状态更改时在同级之间传递数据

我正在两个子组件之间共享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>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={A:'good'}；
}    
SharedEvent（）{
var newvalue=this.setState（{A:'update'}，（）=>{
console.log（this.state）；
警报（this.state.A）
});
}
render（）{
报税表（
);
}
}

母公司薪酬

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>
    );
  }
}

渲染（道具）{
返回(
);
}
}

儿童薪酬

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>
    );
  }
}

构造函数（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
{this.props.name}
);
}
}

Subcent2与Subcontent相同

---

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

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

• 首先，您应该将SharedEvent（）{}函数替换为SharedEvent=（）=>{…您的函数代码}，这是因为作用域已更改，如果您在组件中引用this来调用其函数之一，您应该使用箭头函数，或者像以前一样定义它们，并在构造函数中将它们绑定到this，而您还没有这样做
• 其次，按钮上的onClick事件按其默认行为重新启动页面，所有内容都会像组件状态一样刷新，这可能是您看不到文本更改的原因，因为页面刷新且状态返回“good”，因此请尝试用以下内容替换onClick函数：

  <button onClick={e => {e.preventDefault(); this.props.whatever();}}> {this.props.name} </button>
  

  {e.preventDefault（）；this.props.whatever（）；}}>{this.props.name}
  

---

为什么不将

名称

传递给

分包商2

：

？范围不尽相同！当您执行

this.props.whatever.bind（this，'shared'）

时，请尝试通过

SharedEvent=（）=>

更改

SharedEvent（）

您在

SharedEvent

方法中收到此参数的位置？马沙拉，您太棒了！只有第一步解决了这个问题