React中的表单元素

Posted 2020-10-24 sminocence

在web应用开发当中，表单还是很重要的元素。
应用表单组件有：文本框（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>

Select组件：如果是单选，就用单个变量保存，如果是多选就用一个数组保存。
1.单选：

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>
    )
}

2.多选

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>
    );
}