父组件向子组件传值:
利用props
的特性,父组件向子组件传值,把需要传递的值写成表达式temp={this.state.temp}
,子组件接收的时候,直接使用this.props.temp
,同理,传递其他值只要名字相互对应即可。看下面例子
//父组件
<Calculator scale='c' temp={this.state.temp} />
//子组件
<input type="text" value={this.props.temp}/>
子组件向父组件传值:
子传父,依旧使用子组件触发父组件方法的方式,在方法里携带参数,让父组件接收到参数,子组件的props包含了父组件传递过来的参数,同时也包含写在子组件身上的方法,所以我们可以通过调用props身上的方法,来触发父组件身上的方法,看下面例子
//子组件
<input type="text" value={this.props.temp} onChange={this.changeTemp} />
changeTemp(e) {
this.props.onTempChange(e.target.value)
}
//父组件
<Calculator onTempChange={this.changeTemp} scale='c' temp={this.state.temp} />
this.changeTemp = this.changeTemp.bind(this)
changeTemp(temp) {
this.setState({
scale: 'c',
temp: temp
})
}