受控组件
在HTML表单元素中,输入类的DOM,随着用户的输入,通过onChange
事件和setState
,将数据维护到state
中,在需要时,从state
中获取数据的组件,被称为受控组件
官方推荐表单尽量使用受控组件
受控组件类似于Vue
中双向绑定的作用
class Login extends React.Component{
state = {
username:'',
password:''
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
handleSubmit = (event)=>{
// 通过state获取数据
const {username,password} = this.state
alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="username"/>
密码:<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
非受控组件
与受控组件相对的,如果仅仅想要获取某个表单元素的值,并不关心他是如何改变的,可以通过获取DOM
节点的方式来取值,通常使用ref
,这种不依赖于state
,现用现取的组件被称为非受控组件。
class Login extends React.Component{
handleSubmit = (event)=>{
// 通过ref获取数据,现用现取
const {username,password} = this
alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input ref={c => this.username = c} type="text" name="username"/>
密码:<input ref={c => this.password = c} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}