【React】受控组件

受控组件，就是表单数据交给React管理。
怎么管？
用组件状态state来同步记录表单数据。

怎么个同步法？
比如，input[type='text']的value属性值来自this.state.value；
文本框内输入文本，触发change事件，handleChange调用setState同步更新this.state.value。

文本输入框

import React from "react";
import ReactDOM from "react-dom";

class NameForm extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:'Nicholas'
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e){
        this.setState({
            value:e.target.value
        })
    }
    handleSubmit(e){
        console.log(this.state.value);
        e.preventDefault();
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>名字：<input type='text' name='name' value={this.state.value} onChange={this.handleChange}/></label>
                <input type='submit' value='提交'/>
            </form>
        )
    }
}

ReactDOM.render(
    <NameForm/>,
    document.getElementById('root')
)

单选选择框

import React from "react";
import ReactDOM from "react-dom";

class FlavorForm  extends React.Component{
    render(){
        return (
            <form onSubmit={this.handleSubmit} >
            <select>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option selected value="coconut">椰子</option>
            <option value="mango">芒果</option>
            </select>
            </form>
        )
    }
}

ReactDOM.render(
    <FlavorForm/>,
    document.getElementById('root')
)

如你我所见，React并不希望我们使用selected属性，它的建议是：用value吧。

import React from "react";
import ReactDOM from "react-dom";

class FlavorForm  extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:'mango'
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleSubmit(e){
        console.log('我最喜欢的水果是'+this.state.value);
        e.preventDefault();
    }
    handleChange(e){
        this.setState({
            value:e.target.value
        })
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit} >
                <select value={this.state.value} onChange={this.handleChange}>
                    <option value="grapefruit">葡萄柚</option>
                    <option value="lime">酸橙</option>
                    <option value="coconut">椰子</option>
                    <option value="mango">芒果</option>
                </select>
                <input type='submit' />
            </form>
        )
    }
}

ReactDOM.render(
    <FlavorForm/>,
    document.getElementById('root')
)

多选选择框

<select multiple>，即多选选择框 ，这里的this.state.value是一个数组。

import React from "react";
import ReactDOM from "react-dom";

class FlavorForm  extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:['mango','grapefruit']
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleSubmit(e){
        console.log('我最喜欢的水果是'+this.state.value);
        e.preventDefault();
    }
    handleChange(e){
        let newValue;
        var idx = this.state.value.indexOf(e.target.value);
        if(idx === -1){
            newValue = [...this.state.value,e.target.value];
        }else{
            newValue = this.state.value.filter((item,index) => index != idx);
        }
        this.setState({
            value:newValue
        })
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit} >
                <select value={this.state.value} onChange={this.handleChange} multiple>
                    <option value="grapefruit">葡萄柚</option>
                    <option value="lime">酸橙</option>
                    <option value="coconut">椰子</option>
                    <option value="mango">芒果</option>
                </select>
                <input type='submit' />
            </form>
        )
    }
}

ReactDOM.render(
    <FlavorForm/>,
    document.getElementById('root')
)

多个表单字段

import React from "react";
import ReactDOM from "react-dom";

class User  extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            username:'Nicholas',
            gender:'male'
        }
    }
    handleChange(e){
        const name = e.target.name;
        this.setState({
            [name]:e.target.value
        })

    }
    handleSubmit(e){
        alert(`${this.state.username} is ${this.state.gender}`);
        e.preventDefault();
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>姓名：<input type='text' name='username' 
                                    value={this.state.username} 
                                    onChange={this.handleChange}/></label><br/>
                <label>性别：<input type='radio' name='gender' value='male'
                                    onChange={this.handleChange} 
                                    checked={this.state.gender === 'male'}/>男
                            <input type='radio' name='gender' value='female'
                                    onChange={this.handleChange} 
                                    checked={this.state.gender === 'female'}/>女
                </label><br/>
                <input type='submit' />
            </form>
        )
    }
}

ReactDOM.render(
    <User/>,
    document.getElementById('root')
)

稍微注意下this.setState({[name]:e.target.value}。
我们可以这样定义一个对象，

const o = {
    'a':'hello',
    'b':'world'
}

也可以这样，

const foo = 'a';
const bar = 'b';
const obj = {
    [foo]:'hello',
    [bar]:'world'
}