受控组件
在HTML中,表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。
而在React中,这些输入表单元素的值,应该保存在state中,并且只能由setState()进行更新。比如给表单元素绑定onChange事件,当input状态发生改变的时候,就会触发onChange事件,从而更新组件的state。
React中推荐使用受控组件,因为可以减少使用ref,受控组件可以理解为Vue中的数据双向绑定,只不过React没有替我们实现,需要自己绑定 onChange
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) => {
// 阻止表单提交的默认事件
event.preventDefault()
const {username, password} = this.state
alert('你输入的用户名是:' + username + ',你输入的密码是:' + password)
}
render() {
return (
<form action="xxx" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="username"/>
密码:<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>, document.getElementById('test1'));
非受控组件
非受控组件指的是,表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。
在非受控组件中,可以使用一个ref来从真实DOM获得表单元素的值。
class Login extends React.Component {
handleSubmit = (event) => {
// 阻止表单提交的默认事件
event.preventDefault()
const {username, password} = this
alert('你输入的用户名是:' + username.value + ',你输入的密码是:' + password.value)
}
render() {
return (
<form action="xxx" 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>
)
}
}
ReactDOM.render(<Login/>, document.getElementById('test1'));
总结
- 共同点,都是指表单元素,或者表单组件。
- 不同点,被react的state控制,就是受控组件。不会state控制,就是非受控组件。
- 受控组件的实现方式,就是设置state,调用setstate来更新数据和视图。
- 非受控组件使用ref等方式,更新数据和视图。