React -- 表单

牢记：在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中定义的所有表单事件。