在web应用开发当中,表单还是很重要的元素。
1.应用表单组件有:文本框(input、textarea)、单选按钮和复选框、Select组件。
文本框:文本框的状态改变即文本框中的内容的改变。此时的state应该是inputValue或者是textareaValue。在状态改变时的处理函数应该是
handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}
单选按钮和复选框:
1.单选按钮:它的状态state就是radioValue
this.state = {
radioValue:''
};
//在这里只是设置了radioValue的值,因为单选按钮本来就是只有一个按钮被选中
//当用户点击单选按钮的时候,就会通过下面的函数获取到选中的按钮的value
//即radioValue
handleChange(e){
this.setState({
radioValue:e.target.value,
})
}
//下面通过===一次判断每个input标签的值和radioValue是否相等来判断checked的值是true还是false
<input
type="radio"
value="male"
checked={radioValue === 'male'}
onChange = {this.handleChange}
/>
<input
type="radio"
value="female"
checked={radioValue === 'female'}
onChange={this.handleChange}
/>
2.复选框:它的状态是通过一个数组来保存的,因为复选,即就应该保存选中的多个复选框,以便用户进行操作,从而改变状态而重新渲染。
this.state = {
coffee:[],
}
//通过一个数组来保存状态
handleChange(e){
const {checked,value} = e.target;
let {coffee} = this.state;
//判断这个复选框是否被选中
if(checked && coffee.indexOf(value) === -1){
coffee.push(value);
}else{
coffee = coffee.filter(i => i !== value);
}
this.setState({
coffee,
});
}
然后通过coffee.indexOf(‘aa’) 去遍历coffee这个数组,是否能找到和aa相同的字符串,来进行复选框checked是true还是false的判断。
<p>请你选择你最喜欢的咖啡</p>
<label>
<input
type="checkbox"
value="aa"
checked={coffee.indexOf('aa') !== -1}
onChange={this.handleChange}
/>
aa
</label>
<br/>
<label>
<input
type="checkbox"
value="bb"
checked={coffee.indexOf('bb') !== -1}
onChange={this.handleChange}
/>
</label>
3.Select组件:如果是单选,就用单个变量保存,如果是多选就用一个数组保存。
单选:
this.state = {
area:'',
}
handleChange(e){
this.setState({
area:e.target.value,
});
}
render(){
const {area} = this.state;
return(
<select value={area} onChange={this.handleChange}>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
)
}
多选
this.state = {
area:['beijing','shanghai'],
};
handleChange(e){
const {options} = e.target;
//注意,这里返回的options是一个对象,并非数组
const area = Object.keys(options).
filter(i => options[i].selected === true)
.map(i => options[i].value);
this.setState({
area,
});
}
render(){
const {area} = this.state;
return(
<select multiple={true} value={area} onChange={this.handleChange}>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
);
}