受控组件 和 非受控组件
2022-03-17 本文已影响0人
云高风轻
1.前言
之前一直没有看受控组件和非受控组件,今天抽空来 捋一下
2. 基础
- 首先明确受控组件和非受控组件都指的是
表单元素- 例如 <input>、 <textarea> 和 <select>
- 只要牵扯到事件记住 2个
箭头,保证不出错- 事件创建者 在声明事件的时候用 箭头函数
- 事件调用者 调用的时候外层包裹 箭头函数
3. 区别
3.1 受控组件
- 表单组件的状态/数据只由
state维护 修改只能通过setState()来更新,- 表单数据是由 React 组件来管理
3.2 非受控组件
- 使用
ref来从 DOM 节点中获取表单数据。- 表单数据将交由 DOM 节点来处理
4. 受控组件 demo
特点就是数据可控 ,完全由 React的 state管理
class HelloMsg extends Component {
//********************** state
constructor() {
super()
this.state = {
msg: "双向绑定"
}
}
// ****************自定义函数
//vue v-model v-bind:value = {msg} v-on:input = {}
changeHandler = (event) => {
this.setState({
msg: event.target.value
})
}
// *************** render
render() {
let { msg } = this.state
return (
<div>
<h1>{msg}</h1>
<input type="text"
value={msg}
onChange={(event) => {
this.changeHandler(event)
}} />
<hr />
<button onClick={()=>{ console.log("state:",this.state.msg);
}}> 提交</button>
</div>
)
}
}
5. 非受控组件 demo
特点 就是 ref 获取DOM 进行数据的更新
这样就不可控,因为不能进行统一管理
class HelloMsg extends Component {
//********************** state
constructor() {
super()
this.state = {
msg: "双向绑定"
}
}
// ****************自定义函数
//vue v-model v-bind:value = {msg} v-on:input = {}
changeHandler = () => {
this.setState({
msg: this.msgInput.value
})
}
// *************** render
render() {
let { msg } = this.state
return (
<div>
<input type="text" defaultValue={msg} />
<h1>{msg}</h1>
<input type="text"
ref={a => { this.msgInput = a }}
value={msg} onChange={() => {
this.changeHandler()
}} />
<hr />
<button onClick={()=>{
console.log("发请求:", this.msgInput.value);
}}> 提交</button>
</div>
)
}
}
6.后记
莫听他人言,实践出真知
