React子组件向父组件传值

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

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

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

/***实现在输入框输入邮箱时,在div中即时显示输入内容***/

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

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

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

你可能感兴趣的:(React.js)