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'));

        

          
        
        
        

          

          AI 代码解读