React子组件向父组件传值

最新推荐文章于 2024-07-27 22:00:00 发布

逸尘️

最新推荐文章于 2024-07-27 22:00:00 发布

阅读量2.3w

点赞数 2

分类专栏： React.js 文章标签： react 组件传值

本文链接：https://blog.csdn.net/haoaiqian/article/details/75934477

版权

React.js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在使用React进行模块化开发时，常会遇到子组件向父组件传值的场景。对于复杂的组件间传值，使用 flux 或 redux 应该是最好的选择。除此之外，还有两种简易的选择，适用于简单的组件结构。

1. 父组件通过props传递用来控制state的回调，在子组件中调用

依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式

/***实现在输入框输入邮箱时，在div中即时显示输入内容***/
<body>
    <div id="test"></div>
</body>

//子组件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                邮箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});

//父组件
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>邮箱：{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

2. 通过context在子组件中获取和设置父组件暴露出来的属性值

子组件向父组件传值可以通过context, context可以跨级从父组件向子组件传值，也可以子组件来获取和设置父组件暴露出来的属性值。