React超简单同级组件传参

 

我们废话不都说，来看场景：

 

SelectInput、ToolBar、TableComponent为兄弟组件，他们的共同父组件为index。

当我们点击搜索后，需要将筛选出的数据给到TableComponent，那么我们一起看看这个简单实用的方法。

1、首先在公共的父组件index中自定义一个方法

    handleSubmit(con){
        console.log(con)
    }

2、将这个方法传给SelectInput组件

<SearchInput onSubmit={this.handleSubmit.bind(this)} />

3、SelectInput组件将值传给父组件的handleSubmit

this.state={
  //假设这是我们筛选出的数组
  let arr = [];
}

//搜索按钮的点击事件
search(){
    this.props.onSubmit(this.state.arr)
}

4、这时候我们在index中就可以拿到这个数组

    handleSubmit(con) {
      this.setState({ info: con })
    }

5、赋值后传入TableComponent

<TableComponent listContent={this.state.info} />

6、现在我们就可以在TableComponent中拿到值啦

console.log(this.props.listContent)