【React】第四部分 非受控组件和受控组件
4. 非受控组件和受控组件
非受控组件
简单来说就是对于输入类的DOM现用现取就叫做非受控组件
class Demo extends React.Component{
render(){
return (
<form onSubmit ={this.handleForm}>
用户名 : <input ref={c => this.userName = c} type="text" /><br/>
密码 : <input ref={c => this.password = c} type="password" /><br/>
<button>登录</button>
</form>
)
}
handleForm = () =>{
const {userName,password} = this
alert(`用户名: ${userName.value} -- 密码: ${password.value}`)
}
}
ReactDOM.render(<Demo/>,document.getElementById('box'))
受控组件
对于输入类的DOM随着输入发生变化不断维护到状态里,需要用的时候在从状态中取出来
// 受控组件
class Demo extends React.Component{
render(){
return (
<form onSubmit ={this.handleForm}>
用户名 : <input onChange = {this.saveUserName} type="text" /><br/>
密码 : <input onChange = {this.savePassword} type="password" /><br/>
<button>登录</button>
</form>
)
}
// 初始化state
state = {
userName : '',
password : ''
}
saveUserName = (e) =>{
this.setState({userName:e.target.value})
}
savePassword = (e) =>{
this.setState({password:e.target.value})
}
handleForm = () =>{
const {userName,password} = this.state
alert(`用户名: ${userName} -- 密码: ${password}`)
}
}
ReactDOM.render(<Demo/>,document.getElementById('box'))
在开发中尽量写受控组件这种形式因为可以避免写很多的ref 影响性能
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!