Question

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

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 =（）=> {...您的函数代码}，这是因为范围已更改，并且如果您引用的是 this 在要调用其功能之一的组件中，您应该使用箭头功能或像完成操作一样定义它们，然后将它们在构造函数中绑定到尚未完成的 this 。
其次，onClick事件打开按钮，通过其默认行为重新启动页面，并且所有内容都与组件状态一样刷新，这可能是由于页面刷新和文本更改而导致看不到文本的原因。状态恢复为“良好”，因此请尝试使用以下方法替换onClick函数：
```
$timeTO
```

React Components：在状态变化的同级之间传递数据

1 个答案: