react子组件向父组件传值

子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/***实现在输入框输入邮箱时,在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')
);
#

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×