React中的表单元素

在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>

    );

}

巴特西

React中的表单元素

最新文章

热门文章