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