react中利用受控组件(onchange事件)对form表单内容统一提取

1.利用受控组件(onchange事件)对form表单内容统一提取

详细代码如下：

import React, { Component } from 'react'

export default class Form extends Component {
    state = {
        oname: [
            { no: '1101', name: 'aaa' },
            { no: '1102', name: 'bbb' },
            { no: '1105', name: 'ccc' },
            { no: '1106', name: 'ddd' }
        ],
        text:{}
    }
    // 利用受控组件获取vlaue或状态
    getcontent=(e)=>{
        let {text}=this.state
        // 获取input框中name属性值
        let name=e.target.name
        // 获取input中的value或状态
        let value=e.target.type==='checkbox'?e.target.checked:e.target.value
        // 利用受控组件进行存储，把新的值覆盖旧的值
        // 利用[name]:value获取到的不同的属性名和值进行修改
        let t={
            ...text,
            [name]:value
        }
        // 利用onchange实时渲染
        this.setState({
            text:t
        })
    }
    // 进行内容提交
    submit=()=>{
        // 默认事件阻止
        // e.preventDefault()
        // 进行内容提交
        console.log(this.state.text);
    }
    render() {
        let { oname } = this.state
        return (
            
                

                    姓名：

                    密码：

                    男：

                    女：

                    下拉菜单：
                        {
                            oname.map(e =>
                                {e.name}
                            )
                        }
                    

                    文本框:  

                    复选框：

                    {}
                    
                
                

            
        )
    }
}