/**
* Created by fanxiaole on 17/3/24.
* 需求 在子控件(select)中選擇性別 在父控件(form)中獲取這個值並提交
*
*/
//步驟
//1.創建父控件(form) 並添加子控件 同時利用state屬性監控子控件中值得變化 創建修改父控件中state屬性的方法
//2.將父控件中修改state屬性的方法傳遞給子控件
//3.創建子控件 並在其中將子控件屬性handleSelectState 交給onChange方法去改變
var SelectComponent = React.createClass({
render : function () {
return <select onChange={this.props.handleSeclectState}>
<option value="0">葵花寶典</option>
<option value="1">辟邪劍法</option>
<option value="2">魯冰遜漂流記</option>
<option value="3">十萬個爲什麼</option>
</select>
}
});
var ParentComponent = React.createClass({
getInitialState : function(){
return {book : '0'}
},
handleChange : function (e) {
console.log(e.target.value);
this.setState({book : e.target.value});
},
handleSubmit :function (e) {
//剔除form的默認提交
e.preventDefault()
alert(this.state.book);
},
render : function () {
return <form onSubmit={this.handleSubmit}>
<SelectComponent handleSeclectState = {this.handleChange}></SelectComponent><br/>
<button type = "submit">提交</button>
</form >
}
});
ReactDOM.render(<ParentComponent/>,document.body);
react native 子控件傳遞數據給父控件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.