reactjs是一枚新進(jìn)小鮮肉浩嫌，跟gulp搭配流行一段時(shí)間了。工作或者面試中經(jīng)常遇到這樣的問題专普，“子組件如何向父組件傳值悯衬？”。其實(shí)很簡(jiǎn)單檀夹，概括起來就是：react中state改變了筋粗，組件才會(huì)update。父寫好state和處理該state的函數(shù)炸渡，同時(shí)將函數(shù)名通過props屬性值的形式傳入子娜亿，子調(diào)用父的函數(shù)，同時(shí)引起state變化蚌堵。子組件要寫在父組件之前买决。具體寫法看下面3個(gè)例子。
1. 例子一
這里如下圖吼畏，用戶郵箱為父督赤，綠色框?yàn)樽印?父組件為用戶輸入的郵箱設(shè)好state，即“{email: ''}”泻蚊，同時(shí)寫好處理state的函數(shù)躲舌，即“handleEmail”，這兩個(gè)名稱隨意起性雄；再將函數(shù)以props的形式傳到子組件孽糖，子組件只需在事件發(fā)生時(shí)，調(diào)用父組件傳過來的函數(shù)即可毅贮。
//以下所有例子對(duì)應(yīng)的html
<body>
<div id="test"></div>
</body>
//子組件
var Child = React.createClass({
render: function(){
return (
<div>
請(qǐng)輸入郵箱：<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. 例子二
有時(shí)候往往需要對(duì)數(shù)據(jù)做處理，再傳給父組件滩褥，比如過濾或者自動(dòng)補(bǔ)全等等病蛉，下面的例子對(duì)用戶輸入的郵箱做簡(jiǎn)單驗(yàn)證，自動(dòng)過濾非數(shù)字、字母和"@."以外的字符铺然。
Paste_Image.png
//子組件俗孝，handleVal函數(shù)處理用戶輸入的字符，再傳給父組件的handelEmail函數(shù)
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>
請(qǐng)輸入郵箱：<input ref="emailDom" onChange={this.handleVal}/>
</div>
)
}
});
//父組件魄健，通過handleEmail接受到的參數(shù)赋铝，即子組件的值
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')
);
3. 例子3
如果還存在孫子組件的情況呢？如下圖沽瘦，黑框?yàn)楦父锕牵G框?yàn)樽樱t框?yàn)閷O析恋，要求子孫的數(shù)據(jù)都傳給爺爺良哲。原理一樣的，只是父要將爺爺對(duì)孫子的處理函數(shù)直接傳下去助隧。
Paste_Image.png
//孫子筑凫，將下拉選項(xiàng)的值傳給爺爺
var Grandson = React.createClass({
render: function(){
return (
<div>性別：
<select onChange={this.props.handleSelect}>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
)
}
});
//子，將用戶輸入的姓名傳給爹
//對(duì)于孫子的處理函數(shù)并村，父只需用props傳下去即可
var Child = React.createClass({
render: function(){
return (
<div>
姓名：<input onChange={this.props.handleVal}/>
<Grandson handleSelect={this.props.handleSelect}/>
</div>
)
}
});
//父組件巍实，準(zhǔn)備了兩個(gè)state，username和sex用來接收子孫傳過來的值哩牍，對(duì)應(yīng)兩個(gè)函數(shù)handleVal和handleSelect
var Parent = React.createClass({
getInitialState: function(){
return {
username: '',
sex: ''
}
},
handleVal: function(event){
this.setState({username: event.target.value});
},
handleSelect: function(event) {
this.setState({sex: event.target.value});
},
render: function(){
return (
<div>
<div>用戶姓名：{this.state.username}</div>
<div>用戶性別：{this.state.sex}</div>
<Child handleVal={this.handleVal.bind(this)} handleSelect={this.handleSelect.bind(this)}/>
</div>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);
