React -- 表单

野性酷女 2022-06-12 22:16 206阅读 0赞

**牢记：在React中，一切数据都是状态。**

## 应用表单组件 ##

**1、文本框 input&textarea**

mport React, { Component } from 'react';
    
    class App extends Component { 
        constructor(props) {
            super(props);
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleTextareaChange = this.handleTextareaChange.bind(this);
            this.state = { 
                inputValue: '', 
                textareaValue: '',
            }; 
        }
        handleInputChange(e) { 
            this.setState({
                inputValue: e.target.value, 
            });
        }
        handleTextareaChange(e) { 
            this.setState({
                textareaValue: e.target.value, 
            });
        }
        render() {
            const { inputValue, textareaValue } = this.state; 
            return (
                <div>
                    <p>单行输入框：<input type="text" value={inputValue}
                        onChange={
       this.handleInputChange} /></p> 
                    <p>多行输入框：<textarea value={textareaValue}
                        onChange={
       this.handleTextareaChange} /></p>  
                </div>
            ); 
        }
    }

**2、单选按钮和复选按钮**

单选按钮核心代码：

class App extends Component { 
        constructor(props) {
            super(props);
            this.handeChange = this.handleChange.bind(this);
            this.state = { radioValue: '',}; 
        }
        handleChange(e) { 
            this.setState({
                radioValue: e.target.value, 
            });
        }
        render() {
            const { radioValue } = this.state;
            return ( 
            <div>
                <p>gender:</p> 
                <label> 
                male: 
                <input
                    type="radio"
                    value="male" 
                    checked={radioValue === 'male'}  
                    onChange={
       this.handleChange}
                /> 
                </label>  
                <label>
                    female: 
                <input
                    type="radio"
                    value="female" 
                    checked={radioValue === 'female'}  
                    onChange={
       this.handleChange}
                /> 
                </label>
            </div> 
            );
        } 
    }

复选按钮很类似，这里不再给出代码。

**3、select**

可以通过设置select的multiple=true来实现多选下拉列表。

这里仅给出多选select的代码：

import React, { Component } from 'react';
    class App extends Component {  
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                area: ['beijing', 'shanghai'],
            }; 
        }
        handleChange(e) {
            const { options } = e.target;
            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> 
            );
        } 
    }

## 受控组件 ##

上面的几个示例中，每当表单的值发生变化的时候，该值就会被写入到组件的state中。这样的组件在React中被称为受控组件。

在受控组件中，组件状态和它的value或者checked相对应。

React推荐使用受控的表单组件。下面总结下React受控组件更新state的流程：

> 1、可以通过在constructor中设置state作为表单的默认值  
> 2、每当表单的值发生变化的时候，调用onChange事件处理器  
> 3、事件处理器通过合成事件对象e拿到改变后的状态，并更新state  
> 4、setState会触发视图的重新渲染，完成表单组件的更新

双向的数据绑定：表单的数据源于组件state，并通过props传入；之后，又通过onChange事件处理器将新的表单数据写回道组件的state，完成了数据的双向绑定。

## 非受控组件 ##

如果一个表单组件没有value props（对于单选／复选按钮对应的是checked prop）时，就称为非受控组件。

开发者可以使用defaultValue和defaultChecked 来表示组件的默认值，但是它只会被渲染一次，在后续的渲染时并不起作用：

受控组件：
    <input value={
       this.state.value} 
        onChange={e => {
            this.setState({ value: e.target.value.toUpperCase() }) 
        }}
    />

非受控组件
    <input defaultValue={this.state.value} 
        onChange={e => {
            this.setState({ value: e.target.value.toUpperCase() }) 
        }}
    />

在上面两个示例中：受控组件可以将用户输入转化为大写后显示，非受控组件则不会起作用。需要注意：如果不对受控组件绑定change事件，那么在文本框内输入任何值都不会被显示在屏幕上。

非受控组件和受控组件最大的区别就是：非受控组件的状态并不会受应用状态的控制，而受控组件的值来自于组件的state。

## 表单组件的几个重要属性 ##

**状态属性**

value, checked, selected（不推荐将select属性用语option上，而推荐在select上使用value的方式）

**事件属性**

例如 onChange 事件，实际上，React支持DOM Level3中定义的所有表单事件。