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

/**
 * 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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值