React表单的双向数据绑定

import React, { Component } from 'react';
class MyForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 页面显示男，女，传递后台数据male,female
            genders: [{
                name: '男',
                value: 'male'
            }, {
                name: '女',
                value: 'female'
            }],
            // 地址
            addresses: [{
                name: '江苏',
                value: 'jiangsu'
            }, {
                name: '江西',
                value: 'jiangxi'
            }, {
                name: '山西',
                value: 'shanxi'
            }],
            msg: '注册页面',
            form: {
                username: '',
                age: '',
                gender: 'female',
                address: 'jiangxi',
                desc: ''
            }
        }
    }

    inputChange = (attr, e) => {
        //先获取副本form，修改副本中的数据，再设置到state中的form上
        /* let form = Object.assign({}, this.state.form);
        form[attr] = e.target.value;
        this.setState({
            form
        }); */
        this.setState({
            form: {
                ...this.state.form, [attr]: e.target.value
            }
        })
    }
    toSubmit = () => {
        console.log(this.state.form);
        let obj = { ...this.state.form };
        console.log(obj);
        console.log(obj === this.state.form);//false
    }
    render() {
        const { form } = this.state;
        return (
            <div className="MyForm">
                <form action="" style={{ padding: 20 }}>
                    <h3>{this.state.msg}</h3>
                    <label htmlFor="">
                        用户名：
                        <input type="text" value={form.username} onChange={this.inputChange.bind(this, 'username')} />
                    </label>
                    <br />
                    <label htmlFor="">
                        年龄：
                        <input type="text" value={form.age} onChange={this.inputChange.bind(this, 'age')} />
                    </label>
                    <br />
                    性别：
                    {/* <input type="radio" value="男" name="gender" />男
                    <input type="radio" value="女" name="gender" />女 */}
                    {
                        this.state.genders.map((item, index) => {
                            return (<label htmlFor="" key={index}>
                                <input type="radio" value={item.value} onChange={this.inputChange.bind(this, 'gender')} checked={form.gender == item.value ? true : false} />{item.name}
                            </label>);
                        })
                    }
                    <br />
                    地址：
                    <select name="" id="" value={form.address} onChange={this.inputChange.bind(this, 'address')}>
                        <option value="">请选择</option>
                        {
                            this.state.addresses.map((item, index) => {
                                return <option value={item.value} key={index}>{item.name}</option>
                            })
                        }
                    </select>
                    <br />
                    个人简介：
                    <textarea name="" id="" cols="30" rows="10" value={form.desc} onChange={this.inputChange.bind(this, 'desc')}></textarea>

                </form>
                <button onClick={this.toSubmit}>提交给后台的数据</button>
            </div>
        );
    }
}
export default MyForm;

然后在App.js引入该模块使用该组件即可

显示效果：