时间戳

首页 > 解决方案 > 在兄弟组件之间传递数据时如何执行函数？

reactjs - 在兄弟组件之间传递数据时如何执行函数？

问题描述

我有三个组成部分：父母和两个兄弟姐妹

在父母

this.state = {
  data: ""
}
change = () => {
  this.setState({data: "newData"})
  //trave.AddData()
}
render(){
  return (
    <div>
        <Data execute={this.change}/>
        <Travel data={this.state.data}/>
    </div>
  )
}

在数据组件中：

onSubmit=(e)=>{
        e.preventDefault();
        this.props.change();
    }

在我的 Travel 组件中，我有一个函数 AddData()

this.state= {
      blows:[]
    }

    AddData() {
        console.log("i dont see", this.props);
        this.setState({
    blows:[...this.state.blows, this.props.data]
  })

我想执行那个功能

标签： reactjs

解决方案

当你直接改变状态时（this.state.data=xxxxx），组件不会导致任何重新渲染。在类组件中更新状态的正确方法是使用setState。

this.state = {
  data: ""
}
change = () => {
  // this.state.data="newData" // <---dont do this
  this.setState({data: "newData"})
}
render(){
  return (
    <div>
        <Data execute={this.change}/>
        <Travel data={this.state.data}/>
    </div>
  )
}

推荐阅读