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