1. 前言

写了了这么久 ,其实有个在vue里面我们经常使用的东西,在react里面至今都没提,
那就是vue里面的双向绑定,首先react里面是没有 双向绑定的,需要自己去实现
接下来,就一起来玩下吧,更多的 react和其他框架的区别,请看最下方的官方对比链接

---

2. 需求 - 代码逻辑梳理

2.1 需求

2.gif

---

2.2 基础分析

1. 使用类组件
2. 标签显示输入框的内容
3. 一个输入框
4. 一个提交按钮 这个按钮不是必须的

---

3. 基础代码

input 的value值 和 标签显示的值, state里面定义的值保持一致

class HelloMessage extends React.Component{
                state ={
                    message:"初始值"
                }
                // -----自定义函数
                changeHandle(){
                }
                render() {
                    console.log("render...");
                    let {message}= this.state;
                     return (
                        <div>
                            <h3>{message}</h3>
                            <input   type="text" 
                            onChange={}
                             value={message}/>
                             <button onClick={()=>{}}>提交</button>
                        </div>
                     );
                }
            }

---

4. 输入框逻辑

输入框输入值 界面跟随更改
也就是输入框绑定事件 onChange或者onInput事件,在事件中 修改 message的值

---

4.1 事件代码

基础的js 事件参数传值 获取事件对象

   // -----自定义函数
                changeHandle(ev){
                    console.log(ev.target.value);
                    this.setState({
                        message:ev.target.value
                    })
                }

---

4.2 输入框代码

<input  ref="myMessage" type="text" 
                            onChange={this.changeHandle.bind(this)}
                             value={message}/>

---

5. 提交按钮

提交的时候需要获取到 输入框内容
获取DOM 和 vue 类似 通过 ref属性
但是 使用的时候 this.refs 没有$

 <input  ref="myMessage" type="text" 
                            onChange={this.changeHandle.bind(this)}
                             value={message}/>
<button onClick={()=>{
                                //  this.state.message 
                                // 注意没有$
                                // this.refs.myMessage DOM对象
                                // 和defaultValue一起用就不不需要 双向绑定了
                                 console.log(this.refs.myMessage.value);
                             }}>提交</button>

---

6. 简洁写法 ref

1.ref 绑定监听函数,默认参数就是当前的标签对象
2.也就是说el就是当前这个 input标签对象

     <input  ref={el=>this.msgInput= el} 
               value={message } onChange={(event)=>{
                        this.setState({
                            message :this.msgInput.value
                        })
                    }}/>

<button  onClick={()=>{
                       console.log("获取 ref",this.msgInput.value);
                    }}> 提交</button>

---

7. react 和 vue 简单对比

vue

v-model 是双向数据绑定
状态修改 ---> 界面
界面修改 ---> 状态

---

react

没有双向绑定,只有单向数据传递
状态 ---> 界面
界面 ---> 状态 react没有实现,我们可以在input的 onChange中通过修改input的vaule值,来修改状态

---

参考资料

对比其他框架

---

初心

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

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

共勉