您的位置:首页 > Web前端 > React

react native 子控件传递数据给父控件

2017-03-24 15:47 435 查看
/**
* 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