react父子组件传值,方法调用

父组件向子组件传值:

利用props的特性,父组件向子组件传值,把需要传递的值写成表达式temp={this.state.temp},子组件接收的时候,直接使用this.props.temp,同理,传递其他值只要名字相互对应即可。看下面例子

//父组件

//子组件

子组件向父组件传值:

子传父,依旧使用子组件触发父组件方法的方式,在方法里携带参数,让父组件接收到参数,子组件的props包含了父组件传递过来的参数,同时也包含写在子组件身上的方法,所以我们可以通过调用props身上的方法,来触发父组件身上的方法,看下面例子

//子组件


changeTemp(e) {
  this.props.onTempChange(e.target.value)
}

//父组件


this.changeTemp = this.changeTemp.bind(this)

changeTemp(temp) {
  this.setState({
    scale: 'c',
    temp: temp
  })
}

你可能感兴趣的:(react父子组件传值,方法调用)