《React+Redux前端开发实战》—2.3.2 子组件向父组件通信

2.3.2  子组件向父组件通信

　　虽然React数据流是单向的，但并不影响子组件向父组件通信。通过父组件可以向子组件传递函数这一特性，利用回调函数来实现子组件向父组件通信。当然也可以通过自定义事件机制来实现，但这种场景会显得过于复杂。所以为了简单方便，还是利用回调函数来实现。

　　子组件向父组件通信示例：

　　class Child extends React.Component {

　　  render (){

　　    return <input type="text" onChange={(e)=>this.props.handleChange

        (e.target.value)} />

　　  }

　　}

　　class App extends React.Component {

　　  constructor(props) {

　　  super(props);

　　    this.state = {

　　     data: ''

　　    }

　　  }

　　  handleChange = text => {

　　    this.setState({

　　      data: text

　　    })

　　  }

　　  render() {

　　    return (

　　     <div>

　　           <p>This message is from Child:{this.state.data}</p>

　　       <Child handleChange={ this.handleChange } />

　　     </div>

　　    )

　　  }

　　}

　　ReactDOM.render(

　　<App/>,

　　document.querySelector("#app")

　　)

　　上述代码中有两个组件：子组件Child和父组件App。子组件被父组件引用，在父组件中定义了一个handleChange事件，并通过props传给子组件让子组件调用该方法。子组件接收到来自父组件的handleChange方法，当子组件input框内输入的值Value发生变化时，就会触发handleChange方法，将该值传递给父组件，从而达到子对父通信。

注意：一般情况下，回调函数会与setState()成对出现。