- 在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据)
- 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函数)
- 在子组件中绑定触发传值得事件比如点击事件,在事件处理函数中通过this.props.属性名()调用父组件中定义得方法
- 就可以在父组件中拿到传递过来得值进行使用
具体代码如下:
父组件代码:
import React from 'react'
export default class Home extends React.Component{
constructor(props) {
super(props)
this.state = {
childMsg:'',
}
}
handleGetMsg = (val)=>{
console.log(val);
this.setState({
childMsg:val
})
}
render (){
return (
<div>
<Child
getMsg = {this.handleGetMsg}
></Child>
<p>
这是子组件传递的消息:
{this.state.childMsg}
</p>
</div>
)
}
}
子组件代码:
import React from 'react'
export default class Child extends React.Component{
constructor(props){
super(props)
this.state = {
val: '这是子组件向父组件传递的数据'
}
}
// handleSendPMsg = ()=>{
// this.props.getMsg(this.state.val)
// }
handleSendPMsg (){
this.props.getMsg(this.state.val)
}
render (){
return(
<div>
{/* <button onClick = {this.handleSendPMsg}>子传父</button> */}
<button onClick = {this.handleSendPMsg.bind(this)}>子传父</button>
</div>
)
}
}
备注: handleSendPMsg 函数 使用时 可以直接以箭头函数的形式写 这样的话 在调用时 不要重新绑定this 如果直接以正常函数的形式去写 需要在调用的时候 bind(this)