【React学习】React子父传值

React框架下，把子组件中的数据传给父组件。

思路： 在父组件中创建自定义事件，把传过来的参数，更新到自己的状态中。子组件想要拿到父组件中的自定义事件，需要使用父子传值，把父组件中的自定义事件作为属性传到子组件中，然后给属性赋值，赋的值就是子组件的数据。

<div id="app"></div>    
<script type="text/babel">

    class Parent extends React.Component{
        state={
            msg:""
        }
        // 自定义事件，把传过来的参数，更新到自己的状态中
        handle=(a)=>{
            this.setState({
                msg:a
            })
        }
        render(){
            return(
                <div>
                    <h1>我是父组件--{this.state.msg}</h1>
                    <Child change={this.handle}/>
                </div>
            )
        }
    }
    
    class Child extends React.Component{
        state={
            info:"我是子组件的数据"
        }
        // 父子传值，把父组件中的handle事件作为属性传到子组件中，然后给属性赋值
        fn=()=>{
            this.props.change(this.state.info)
        }
        render(){
            return(
                <div>
                    <h1 onClick={this.fn}>我是子组件</h1>
                </div>
            )
        }
    }

    ReactDOM.render(
        <div><Parent/></div>,
        document.getElementById("app")
    )
</script>

效果
点击子组件，触发子组件中的change事件，父组件就可以拿到子组件的数据。