React父子事件传递方式

实现父子组件双向数据传递：

1，（父 ---> 子）父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数。

2，（子 ---> 父）子组件通过调用父组件传递到子组件的方法向父组件传递数据。

PS：更改props值是不能触发重新渲染的，只有调用setState才会触发控件的重新渲染，所以要实现React的父子组件之间的通讯，需要同时结合props与state来完成，eact是单向数据流，父组件可以向子组件传递props。

var Parent = React.createClass({
    getInitialState: function() {
        return {
            name: this.props.name
        }
    },
    onChangeName: function(name) {
        this.setState({name: name})
    },
    render: function() {
        return <div onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                    Hello&ensp;
                    <Child name={this.state.name} onChangeName={this.onChangeName}>
                    </Child>
                    ,&ensp;welcome.
                </div>;
    },
    onMouseOver: function() {
        this.setState({
            name: "Emily"
        });
    },
    onMouseOut: function() {
        this.setState({
            name: "Grace"
        });
    }
});
var Child = React.createClass({
    render: function() {
        return <span onClick={this.handleClick}>{this.props.name}</span>;
    },
    handleClick: function() {
        this.props.onChangeName("Chris");
    }
});
 
ReactDOM.render(
    <Parent name='Anna' />,
    document.getElementById('example')
);

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42441117/article/details/83344566
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-04-10 18:39:37
阅读 ( 1104 )
分类：

React父子事件传递方式

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看