React的非受控组件和受控组件
1.非受控组件
1.在虚拟DOM节点上标识一个ref属性,并且将创建好的引用(dom节点)赋值给这个ref属性
2.react会自动将输入框中输入的值放在实例的ref属性上
// 只是不受组件控制
// 创造组件
class Text extends React.Component{
login(event){
event.preventDefault() // 组织默认事件
const {username ,password} = this // 结构赋值
}
render(){
const element = (
<div id={"from"}>
<div>
用户名: <input type="text" name="username" ref={c => this.username = c} />
</div>
<div>
密码: <input type="text" name="password" ref={c => this.password = c} />
</div>
<div>
<input type="button" value="登录" />
</div>
</div>
)
return element
}
}
ReactDOM.render(<Text></Text>,document.getElementById('root'))
非受控组件在底层实现时是在其内部维护了自己的状态state,这样表现出用户输入任何值都能反应到元素上。
2.受控组件
1.表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似.
2.受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验.
3.受控组件只有继承React.Component才会有状态.
4.受控组件必须要在表单上使用onChange事件来绑定对应的事件.
// 通过 onChange 事件,边输入边通过 setState 修改状态
/*
当想要获取表单的一些内部状态时,就可以将表单的内部状态和组件的状态进行绑定 这样就形成了受控组件
受控组件: 当我们想要 组件state状态机 和 表单空间的 state 一致时,就可以使用 受控组件,
当我们想要给表单,设置value属性或者checked时,React 就会认为我们要实现一个受控组件,这时必须给控件加 onChange 处理 onChange 再把 控件的状态同步给组件
非受控组件: 我们不需要同步 value 值 ,使用:(defaultValue,defaultChecked)
*/
class Text extends React.Component{
constructor(props){
super(props) // 实例化组件
this.state = {}
}
saveDate = (dataType,event) => {
this.setState({[dataType]:event.target.value})
}
login = (event) => {
event.preventDefault() // 阻止表单提交
}
render(){
return (
<div>
<form onSubmit={this.login}>
用户名:<input type="text" placeholder="你输入账号" name='username' onChange={event => this.saveDate('username',event)}/>
密码:<input type="text" placeholder="请输入密码" name='password' onChange={event => this.saveDate('password',event)}/>
<br/>
<input type="submit" value='登录'/>
</form>
<h1>用户名:{this.state.username ? this.state.username : '暂无用户'} </h1>
<h1>密码: {this.state.password ? this.state.password : '空'}</h1>
</div>
)
}
}
ReactDOM.render(<Text></Text>,document.getElementById('root'))
3、对比受控组件和非受控组件的输入流程:
1.非受控组件: 用户输入的内容 => input 中显示用户输入的内容
2,受控组件: 用户输入的内容 => 触发onChange事件 => 设置 state状态username/password = 的内容 => 渲染input使他的value变成用户输入的内容