表单_受控组件处理多个输入

当页面有多个输入框的时候，为每个输入框都添加一个独立的事件处理函数太过麻烦

我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作

xxxxxxxxxx
import React, { Component } from 'react'

export default class FormTest extends Component {
    constructor() {
        super();
        this.state = {
            username: "",
            password: ""
        }
    }
    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    onSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.username, this.state.password);
    }
    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    名字：<input name="username" type="text" value={this.state.username} onChange={this.onChange} /> 
                    <br />
                    密码：<input name="password" type="password" value={this.state.password} onChange={this.onChange}
                    /> 
                   <br />
                   <input type="submit" value="登录" />
                </form>
            </div>
        )
    }
}