react基础之--子组件向父组件传值

1. 在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
2. 在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
3. 在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
4. 就可以在父组件中拿到传递过来得值进行使用

具体代码如下： 

父组件代码：

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)