React父子组件双向绑定

React父子组件双向绑定

  • 实现思路
  • 部分代码
    • 子元素
      • render
      • js
    • 父元素
      • render
      • js

实现思路

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

部分代码

子元素

render

render(){
    return 
this.change(1)>第一页
}

js

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

父元素

render

render (){
    reutrn 
}

js

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

你可能感兴趣的:(React)