[React] 子组件向父组件通信：回调函数

Posted 2023-03-20

参考技术A

React组件之间的是彼此独立的，组件间的数据流动是单向的，父组件向子组件通信是最常见的方法，父组件通过 props 向子组件传递需要的信息。

在React中，子组件向父组件通信时，可以使用回调函数，或者自定义事件。
在简单的场景中，回调函数常用的办法。

注：
（1）setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。
在 componentWillMount 中执行 setState 方法，组件会更新 state ，但是组件只渲染一次。
因此，这是无意义的执行，初始化时的 state ，都可以放在 this.state=... 中。

（2）原生组件的自定义属性应该加上\'data-\'前缀，React组件则不需要。

深入React技术栈 - P74~P75

React:快速上手——组件通信

React:快速上手(2)——组件通信

向父组件传递数据

　　父组件可以通过设置子组件的props属性进行向子组件传值，同时也可以传递一个回调函数，来获取到子组件内部的数据。

效果演示

　　子组件是输入框，父组件及时获取到输入框内容然后更新右边标签。

　　

父组件传递回调函数

     父组件传递一个方法，即updateSpan，用于更新span内容。

class Father extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            spantxt:null
        }
    }
    /**
     * 更新span中的内容
     * @param {*} txt 
     */
    updateSpan(txt){
        this.setState({
            spantxt:txt
        })
    }
    render(){
        return(
            <div>
                <Son value=‘1‘ onChangeHandle={this.updateSpan.bind(this)}/>
                <span>{this.state.spantxt}</span>
            </div>
        )
    }
}

子组件绑定事件

　　子组件绑定onChange触发事件txtChange，当内容发生改变txtChange会设置state，同时通过访问prop.onChangeHandle调用了父组件的updateSpan方法，此时参数值即数据就被父组件获取到。

class Son extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            txt:props.value
        }
    }
    render(){
        return(
            <input value={this.state.txt} onChange={this.txtChange.bind(this)}/>
        )
    }
    txtChange(event){
        this.setState(
            {txt:event.target.value}
        )
        this.props.onChangeHandle(event.target.value);
    }
}