父组件获取子组件的数据
子组件获取父组件的数据可以通过props获取
那么反过来呢
其中一种是通过传递函数的方法实现
// 父组件
export default class father extends Component{
state={
....
}
// keyWords 就是子组件传过来的value值
handleSendKeyWord=()=>{
return (keyWords)=>{
....
}
render() {
return (
<div>
<Son sendKeyWord={this.handleSendKeyWord()}/>
</div>
)
}
}
}
//子组件
export default class Son extends Component {
// 初始输入框的值
state={
...
}
// 按回车键提交输入框的值
sunmitValue=()=>{
return (e)=>{
if(e.keyCode === 13){
// console.log(this.state.value)
this.props.sendKeyWord(this.state.value)
this.setState({value:""})
}
}
}
render() {
return (
<div>
<input type='text' onKeyUp={this.sunmitValue()}/>
</div>
)
}
}
通过在子组件中 使用this.props.sendKeyWord(this.state.value) 可以将子组件中的value值传递给父组件 ,父组件通过实现handleSendKeyWord() 方法 获取子组件的 value 也就是 keyWords 数据