React父子组件双向绑定

实现思路

react数据是单向绑定的，想要实现双向绑定，需要子元素改变时执行父元素传给子元素的函数并把参数传给父元素，父元素获得子元素传过来的值，setState到自己状态中
接下来我们通过一个分页组件举个简单到例子,通常页面改变时，我们需要在父元素当中请求一些数据，就需要在父元素中获取到当前页

部分代码

子元素

render

render(){
    return <div>
        <div onClick=()=>this.change(1)>第一页</div>
    </div>
}

js

state = {
    page:this.props.current,
}
change = (index)=>{
    this.setState({page:index});
    this.props.changePage(index);//执行父元素的函数，将值传给父元素
}

父元素

render

render (){
    reutrn <div>
        <Pagination 
            current={this.state.page}
            changePage={this.changePage}/>
    </div>
}

js

state = {
  page: 0,
}
changePage(page){
	this.setState({page})；
	//进行网络请求
}