10 react表单操作（未封装版） 喜欢点赞加关注！谢谢

import React, { Component } from "react"
import { log } from "util";
export default class Form extends Component {
    constructor() {
        super()
        this.state = {
            user: {//要提交给后端的数据  起名字后端叫什么我们也叫什么
                username: '',
                password: '',
                sex: '',
                profession: "",
                hobby: [],
                des: '',
                isAgree: false

            },
            jobs: [//职业的类型
                {
                    label: '杏仁',
                    value: 'xingr'
                },
                {
                    label: '杏子',
                    value: 'xingz'
                },
                {
                    label: '杏花',
                    value: 'xingh'
                },
                {
                    label: '杏壳',
                    value: 'xingk'
                }
            ],
            hobby: [
                {
                    title: '喝酒',
                    value: 'drink',
                    checked: false
                },
                {
                    title: '抽烟',
                    value: 'smoking',
                    checked: false
                }, {
                    title: '烫头',
                    value: 'tt',
                    checked: false
                }, {
                    title: '完',
                    value: 'play',
                    checked: false
                }
            ]
        }
    }
    //用户名和密码的事件
    changeV (e, v) {
        this.setState({
            user: {
                ...this.state.user,
                [v]: e.target.value
            }
        }, () => {
            console.log(this.state.user);
        })

    }
    // 性别
    changeR (e, v) {
        this.setState({
            user: {
                ...this.state.user,
                [v]: e.target.value
            }
        }, () => {
            console.log(this.state.user);
            console.log(v, e.target.value);
        })

    }

    // 职业
    changeJ (e, v) {
        console.log('11');
        this.setState({
            user: {
                ...this.state.user,
                [v]: e.target.value
            }
        }, () => {
            console.log(this.state.user);
            console.log(v, e.target.value);
        })


    }

    // 爱好
    changeH (e, attr, index) {
        //取出来（解构赋值）
        const { hobby } = this.state
        // 修改
        hobby[index][attr] = e.target.checked

        // 筛选 并且取出value值
        var h = hobby.filter((item) => { return item.checked }).map((item) => { return item.value })

        this.setState({
            user: {
                ...this.state.user,
                hobby: h
            }
        }, () => {
            console.log(this.state.user);
        })
    }

    changeT(e,v){
        this.setState({
            user:{
                ...this.state.user,
                [v]:e.target.value
            }
        })
    }
    changeG(e,v){
        this.setState({
            user:{
                ...this.state.user,
                [v]:e.target.checked
            }
        },()=>{
           console.log(this.state.user);
        })
    }
    submit(){
        console.log(this.state.user);
    }



    render () {
        return (
            <div>
                <h1>表单元素的获取</h1>
                <p>账号: <input type="text" onChange={(e) => this.changeV(e, 'username')} /></p>
                <p>密码: <input type="text" onChange={(e) => { this.changeV(e, 'password') }} /></p>
                <p>
                    性别: <input type="radio" onChange={(e) => { this.changeR(e, 'sex') }} name='sex' value='0' />男
                      <input type="radio" onChange={(e) => { this.changeR(e, 'sex') }} name='sex' value='1' />女
                </p>
                <p>
                    职业：
                    <select onChange={(e) => { this.changeJ(e, 'profession') }}>
                        <option value="" disabled>---请选择---</option>
                        {/* <option value="xingren">杏仁</option>
                        <option value="xingke">杏壳</option>
                        <option value="xinghua">杏花</option> */}

                        {
                            this.state.jobs.map(item => {
                                return <option key={item.value} value={item.value}>{item.label}</option>
                            })
                        }
                    </select>
                </p>

                <p>
                    爱好：
                    {/* <span><input type="checkbox" />喝酒</span>
                    <input type="checkbox" />抽烟
                    <input type="checkbox" />烫头
                    <input type="checkbox" />吃饭 */}
                    {
                        this.state.hobby.map((item, index) => {
                            return (<span key={index}><input onChange={(e) => { this.changeH(e, 'checked', index) }} value={item.value} type="checkbox" />{item.title}</span>)
                        })
                    }


                </p>
                <p>
                    备注：
                    <textarea cols="30" rows="10" onChange={(e)=>{this.changeT(e,'des')}}></textarea>
                </p>
                <p>
                    <input type="checkbox" onChange={(e)=>{this.changeG(e,"isAgree")}}/>我同意
                </p>
                <p>
                    <button onClick={this.submit.bind(this)}>提交</button>
                </p>

            </div>
        )
    }
}