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 (
            <p>
                <p>单行输入框：<input type="text" value={inputValue}
                    onChange={this.handleInputChange} /></p> 
                <p>多行输入框：<textarea value={textareaValue}
                    onChange={this.handleTextareaChange} /></p>  
            </p>
        ); 
    }
}

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 ( 
        <p>
            <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>
        </p> 
        );
    } 
}

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

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中被称为受控组件。