表单 是网站开发不可缺少的元素,构成表单的元素有: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/>
)
}