1. 前言
写了了这么久 ,其实有个在
vue里面我们经常使用的东西,在react里面至今都没提,那就是
vue里面的双向绑定,首先react里面是没有 双向绑定的,需要自己去实现接下来,就一起来玩下吧,更多的
react和其他框架的区别,请看最下方的官方对比链接
2. 需求 - 代码逻辑梳理
2.1 需求
![X34L%VZP{K([)]LZNEDZ1L3.png](https://ucc.alicdn.com/pic/developer-ecology/40114cda417048c4a2adbc54603c153f.png?x-oss-process=image/resize,w_1400/format,webp "X34L%VZP{K([)]LZNEDZ1L3.png")
2.2 基础分析
- 使用类组件
- 标签显示输入框的内容
- 一个输入框
- 一个提交按钮 这个按钮不是必须的
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值,来修改状态
