react 中from表单输入 提交

效果图
代码：

import React, { Component } from 'react'
import './from.css'
class Parent extends Component {
    aihao = [
        {
            name: "唱歌",
            value: "sing",
            ischecked: false
        },
        {
            name: "跳舞",
            value: "dance",
            ischecked: false
        },
        {
            name: "阅读",
            value: "reading",
            ischecked: false
        },
        {
            name: "写代码",
            value: "codding",
            ischecked: false
        },

    ]
    start = {
        user: {
            name: '',
            pass: '',
            sex: '',
            habby: ["sing", "reading"],
            job: "",
            des: '',
            isAgree: false
        }
    }
    //最原始的代码 ===>第一步
    //     classname(e){
    //         var user=this.start.user

    //         user.name=e.target.value
    // this.setState({
    //     user
    // })

    //     }

    //     classpass(e){
    //         var user=this.start.user

    //         user.pass=e.target.value
    // this.setState({
    //     user
    // })
    // }
    componentDidMount() {
        //在查看的情况下  ====>最后一步
        //this.aihao(服务器赋值是)本身状态是ischecked是false时（没有选中） 当this.start.user.hooby有值 （ 比如：habby: ["sing", "reading"],）
        //需要在页面一加载 就进行判断
        this.aihao.forEach(item => {
            //当this.start.user.habby有值的情况下 
            if (this.start.user.habby.some(i => {
                return i == item.value
            })) {
                //this.aihao.ischecked就为true
                item.ischecked = true
            } else {
                //否则this.aihao.ischecked就为false
                item.ischecked = false
            }
        })
    }
    //e事件源 通过事件源得到当前的input的value
    //props input框类型 
    //index 针对爱好多选
    classuser(e, props, index) {
        var user = this.start.user
        switch (props) {
           
            case 'isAgree':
                //得到我同意的CheckBox的checked的状态（就是 是true还是false）====>第二步
                user[props] = e.target.checked
                break;
                 //===>第三步
            case 'habby':  
            //得到爱好CheckBox的checked 是true还是false  
            this.aihao[index].ischecked = !this.aihao[index].ischecked
            //得到爱好CheckBox的checked是true的input框
            var arr = this.aihao.filter(item => {
                return item.ischecked
            })
            console.log(arr)
            //重新创建一个数组 得到爱好checkbox被checked事true的数组值
            user[props] = arr.map(item => item.value)

            // console.log(arr2); 

            // console.log(this.aihao);

            break
            default:
                //得到普通input的value值 （比如 用户，密码 等。。） ===>第二步 （理解第一步的繁琐 就行代码打包）
                user[props] = e.target.value
                break;
        }

        this.setState({
            user
        })

    }

    send() {
        console.log(this.start.user);

    }
    render() {
        return (
            <div className='from'>
                {/* 最初代码onChange={(e) => this.classname(e)}  */}
                <div> <span className='spam'> 用户：</span><input onChange={(e) => this.classuser(e, 'name')} type="text" /></div>
                 {/* 最初代码onChange={(e) => this.classpass(e)}  */}
                <div> <span className='spam'>密码：</span><input type="password" onChange={(e) => this.classuser(e, 'pass')} /></div>
                <div>
                    {/* 在性别要特别注意 name要赋值 （比如：name="sex"） */}
                    {/* 如果性别要默认选择 （前提this.start.user.sex有值  sex: 'man',） 加checked={this.state.user.sex == 'man'} */}
                    <span className='spam'>性别：</span><input type="checkbox" name="sex" value='man' id="" onChange={(e) => this.classuser(e, 'sex')} />男
                     <input type="checkbox" value='woman' name="sex" id="" onChange={(e) => this.classuser(e, 'sex')} />女
                </div>
                <div><span className='spam'>爱好：</span>{this.aihao.map((item, index) => {
                    return (
                        <span key={item.name}>
                            {/* checked={this.start.user.habby.some(i=>i==item.value)} 是 当查看的状态下 从服务器(this.start.user.hobby 中有值的情况下)赋给CheckBox值是 */}
                            <input type="checkbox" checked={this.start.user.habby.some(i => i == item.value)} name="" id=""
                                onChange={(e) => this.classuser(e, 'habby', index)} />{item.name}</span>
                    )


                })}</div>
                <div>
                    <span className='spam'>工作：</span><select name="" id="" onChange={(e) => this.classuser(e, 'job')}>
                        <option value="">--请选择--</option>
                        <option value="web">web前端</option>
                        <option value="java">java</option>
                        <option value="php">PHP</option>
                    </select>
                </div>

                <div>
                    <span className='spam'>留言：</span><textarea name="" id="" cols="30" rows="10" onChange={(e) => this.classuser(e, 'des')}></textarea>
                </div>
                <div>
                    <input type="checkbox" name="" id="" onChange={(e) => this.classuser(e, 'isAgree')} />请同意
                </div>
                <div> <button onClick={() => this.send()}>提交</button></div>
            </div>
        )
    }
}
export default Parent

提交后台表单数据