react中的双向绑定你真的了解吗
前言：因为项目原因需要学习另一个超级火的框架react, 因为之前一直使用vue进行开发，所以在学习react中会不自觉的代入一些vue中的概念来理解react中的实现，下面就通过对比学习的方式记录下react中的知识。
在react中其实是没有双向绑定的概念，每次更新页面和值都需要我们自己去调用指定的api来触发，而在vue中只需要使用v-model指令就可以完全实现，在vue中的指令其实也是使用了几个事件的语法糖来实现，所以下面就去看下react中的“双向绑定”是怎么来实现的。
如果实现react中得双向绑定，首先要理解state这个属性，简单来说react中得state就是一个对象，它用来缓存和维护当前组件中所使用到得状态，可以理解为vue中data中定义得值，如：
import React, { Component } from 'react'
export default class Class extends Component {
constructor(props) {
super(props)
this.state = {name: '', age: ''}
}
render() {
return (
<div>
<form onSubmit={handleSubmit}>
</form>
</div>
)
}
}
而在函数式组件中，使用hooks可以将这个统一的state值根据功能和场景拆分为多个state用来更加方便的使用和维护，如：
import React, { useState } from 'react'
export default function ModelChange() {
const [name, setName] = useState('')
const [age, setAge] = useState()
const handleSubmit = () => {
}
return (
<div>
<form onSubmit={handleSubmit}>
</form>
</div>
)
}
需要注意的是，如果需要改变维护的状态的值，需要使用指定的方法才会使页面更新，如函数式组件中定义的setName方法等。下面就看看react在input输入框中实现双向绑定，代码如下：
import React, { useState } from 'react'
export default function ModelChange() {
const [name, setName] = useState('')
const handleCnhange = e => {
const data = e.target.value
setName(data)
}
return (
<div>
<form>
<label>
名字：
<input type="text" value={name} onChange={handleCnhange} />
</label>
</form>
</div>
)
}
上面的代码通过useState定义了值name，然后通过input标签的value将name展示出来，通过监听change事件获取输入的值并调用定义好的方法setName修改name的值并更新页面，又使页面展示为新输入的值，通过这个流程的操作就实现了在react中的双向绑定。如果我们想要修改和获取多个输入的值可以使用name属性来实现，代码如下：
import React, { useState } from 'react'
export default function ModelChange() {
const [data, setData] = useState({
name: '', age: ''
})
const handleCnhange = e => {
const {value, name} = e.target
setData(preData => {
return {
...preData,
[name]: value
}
})
}
const handleSubmit = (e) => {
console.log(data)
}
return (
<div>
<form>
<label>
名字：
<input type="text" name="name" value={data.name} onChange={handleCnhange} />
</label>
<label>
年龄：
<input type="text" name="age" value={data.age} onChange={handleCnhange} />
</label>
<input type="button" value="提交" onClick={handleSubmit} />
</form>
</div>
)
}
上面代码将name和age字段声明在了一个集合中（根据业务和使用场景也可以进行拆分定义），通过给input标签添加name属性来更给指定属性更新当前输入的值，效果如下：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
详解Stack Navigator中使用自定义的Render Callback
这篇文章主要为大家介绍了Stack Navigator中使用自定义的Render Callback使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文主要介绍了React如何通过useContext特性实现组件数据传递，文中有相关的代码示例供大家参考，对我们学习React有一定的帮助,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了React添加或移除类的操作方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
由于在项目开发过程中，我们往往时需要调用子组件中的方法，这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了react-native-video实现视频全屏播放的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
useReducer是在react V16.8推出的钩子函数，从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学，大都会经历从class语法向hooks用法的转变，react的hooks编程给我们带来了丝滑的函数式编程体验2022-10-10
这篇文章主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
本文主要介绍了React-router v6 实现登录验证流程，主要介绍了公共页面、受保护页面和登录页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
React Native中WebView与html双向通信遇到的坑
这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论