react中父组件和子组件之间的传值

简单概述：react组件之间的传值是关于react最基本的操作，使用最简单最频繁的就是父组件向子组件传值了，这也是模块化组件使用较为频繁的，主要使用props进行交流：

let Child = React.createClass({
    constructor(props, context) {
        super(props, context);
        this.state = {};
    }
    render() {
		let {title,rightShow} = this.props; 
		return (
			<div>
	            <p>{this.props.title}</p>
                <p>{this.props.name}</p>
	        </div>
		)
	}
})
let Parents = React.createClass({
    constructor(props, context) {
        super(props, context);
        this.state = {};
    }
    render() { 
		return (
        <div>
            the follow content is across child's component:
        	<Child title="Title" name="Name"/>
        </div>	
		);
	}
})

子组件向父组件传值的话，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。

例1:父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”；再将函数以props的形式传到子组件，子组件只需在事件发生时，调用父组件传过来的函数即可。 

//子组件
 

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

//父组件，此处通过event.target.value获取子组件的值
 

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:有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和"@."以外的字符

//子组件，handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数
 

var Child = React.createClass({
    handleVal: function() {
        var val = this.refs.emailDom.value;
        val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
        this.props.handleEmail(val);
    },
    render: function(){
        return (
            <div>
                请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/>
            </div>
        )
    }
});

//父组件，通过handleEmail接受到的参数，即子组件的值

var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(val){
        this.setState({email: val});
    },
    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种基本操作步骤：订阅（subscribe）/监听（listen）一个事件通知，并发送（send）/触发（trigger）/发布（publish）/发送（dispatch）一个事件通知那些想要的组件。

转载于:https://my.oschina.net/u/3416837/blog/916139