1.前言

之前一直没有看受控组件和非受控组件,今天抽空来 捋一下

---

2. 基础

1. 首先明确受控组件和非受控组件都指的是表单元素
2. 例如 <input>、 <textarea> 和 <select>
3. 只要牵扯到事件记住 2个箭头,保证不出错
4. 事件创建者 在声明事件的时候用 箭头函数
5. 事件调用者 调用的时候外层包裹 箭头函数

---

3. 区别

3.1 受控组件

1. 表单组件的状态/数据只由state 维护 修改只能通过setState()来更新,
2. 表单数据是由 React 组件来管理

3.2 非受控组件

1. 使用ref来从 DOM 节点中获取表单数据。
2. 表单数据将交由 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.后记

莫听他人言,实践出真知

---

参考资料

非受控组件

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉