react学习（21）受控组件

1： 受控组件，不使用 ref,会把值存放在state状态中，用的时候直接去状态中取。类似于vue和angualr中的双向数据绑定。
2：如果js中对象的key为变量记得加[]。
3：函数需要加参数，需要写成回调函数的形式。

class Login extends React.Component {
            state={username:'',password:''};
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户姓名：<input type='text' onChange={(e)=>this.save('username',e)}/>
                        用户密码:<input type='password' onChange={(e)=>this.save('password',e)}/>
                        <button>保存</button>
                    </form>
                )
            }
            handleSubmit=(event)=>{
                event.preventDefault();
                alert(`用户名：${this.state.username},密码：${this.state.password}`);
            }
            save=(...rest)=>{
                this.setState({[rest[0]]:rest[1].target.value});
            }
        }
        ReactDOM.render(<Login/>,document.getElementById('test'));