react-12-单向数据流-ref-双向绑定的实现
2021-07-24 本文已影响0人
云高风轻
1. 前言
写了了这么久 ,其实有个在
vue里面我们经常使用的东西,在react里面至今都没提,
那就是vue里面的双向绑定,首先react里面是没有 双向绑定的,需要自己去实现
接下来,就一起来玩下吧,更多的react和其他框架的区别,请看最下方的官方对比链接
2. 需求 - 代码逻辑梳理
2.1 需求
2.gif
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值,来修改状态
