React（9）--表单

表单 是网站开发不可缺少的元素，构成表单的元素有：Label、textarea、select、checkbox、radio、form 等等。这一章，我们学习一下 React 中的表单。

---

< Label />

//JSX中：
<label htmlFor="name">姓名：</label>

//javascript中：
React.DOM.label({ htmlFor : "name"}, "姓名");

---

< textarea/> & < select />

/**
*   React中，允许我们设置：value & defaultValue;
*   而且 React 支持 多选 select
**/

<textarea 
    value={this.state.textarea} 
    defaultValue="hello!"  
    onChange={this.handleChange}/> 

<select multiple="true" 
        defaultValue={["A","B"]} 
        value={this.state.checked} 
        onChange={this.handleChange}>
    <option value="A"> A <option/>
    <option value="B"> B <option/>
    <option value="C"> C <option/>
<select/>

---

< input type=”radio”/> & < input type=”checkbox” />

<input
    type="checkbox"
    value="A"
    checked={this.state.checked}
    onChange={this.handleChange} />

---

< form/>

<form onSubmit={this.submitHandle}>
    ...
    <button type="submit">提交</button>
</form>

---

change事件处理器重用

基本的使用就如上述所说，在实际开发中，我们的组件都有change事件，重用change事件处理器，会使代码更加简洁，并且减少我们的工作量。

这里我介绍2种方法：.bind( )传递参数 和 使用 name 属性判断 2种方法：

...
//.bind()方法：
handleChange1(name, event){
    let data = {};
    data[name] = event.target.value;
    this.setState(data);
}
//根据name属性判断法：
handleChange2(event){
    let data = {};
    data[event.target.name] = event.target.value;
    this.setState(data);
}
...
render(){
    return(
        <form>
            <input type="text" 
                   name="name" 
                   value={this.state.name}
                   onChange={this.handleChange1.bind(this, 'name')} />
                   //onChange={this.handleChange2}
            <input type="text"
                   name="age"
                   value={this.state.age}
                   onChange={this.handleChange1.bind(this, 'age')} />
                   //onChange={this.handleChange2}
        <form/>
    )
}