034_受控组件

只要改变了就调用onchange 所指向的回调

受控组件

页面中所有输入类的DOM

这种输入类的DOM,随着你的输入,人家就会把东西维护到状态里面去

等你需要用的时候,直接从装填里面去取

就像Vue里面的双向数据绑定

在这里面,你不用写ref

而非受控里面,你有几个输入项,就要写几个ref

而官方说 勿过度使用 Refs

代码

``javascript //创建组件 class Login extends React.Component { // 不能违背原则 // 最好不要在状态还么有初始化的时候就往里面放东西 // 这里定义一下 state = { username: '',// 用户名 password:''// 密码 } // 保存用户名到状态中 saveUsername = (event)=>{ console.log('@',event.target.value) this.setState({ username:event.target.value }) } // 保存密码到状态中 savePassword = (event)=>{ console.log('@',event.target.value) this.setState({ password:event.target.value }) } handleSubmit = () => { event.preventDefault();// 阻止表单提交 const {username, password} = this.state; // alert(你输入的用户名是:${username.value},你输入的密码是:${password.value}); // 这回就不用 alert(你输入的用户名是:${username},你输入的密码是:${password}`);

};

render() {
    return (
        <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
            用户名: <input onChange={this.saveUsername} ref={c => this.username = c} type="text" name="username"/>
            密码: <input  onChange={this.savePassword} ref={c => this.password = c} type="password" name="password"/>
            <button>登录</button>
        </form>
    )
}

}

//渲染组件到页面 ReactDOM.render(, document.getElementById('test')) ```