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.valuesetName(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.targetsetData(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属性来更给指定属性更新当前输入的值,效果如下:
react中的双向绑定相关推荐
- iviewUI组件库中select双向绑定不生效
前端小伙伴们有没有遇到过这样的场景,iviewUI组件库中select双向绑定数据时,修改了绑定值,但是页面中渲染的值还是之前的值,不管是去打印还是使用vue插件去查看变量,均显示绑定值已修改,可是页 ...
- EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系 和 事件关系 两种 . 前者操作数据时 ,后者触发事件时. 下面简单 的介绍Eng 中 的 w ...
- react 实现数据双向绑定
首先从没有使用mixin的例子引入 [javascript] view plaincopy print? var BindingExample = React.createClass({ getIni ...
- react表单双向绑定处理
react中处理表单双向绑定的方法: constructor() {super()this.state = {commentData: [{name: '冯昕',text: '说自己是大帅哥',id: ...
- Vue 中实现双向绑定的 4 种方法
1. v-model 指令 <input v-model="text" /> 复制代码 上例不过是一个语法糖,展开来是: <input:value="t ...
- Vue基础--Vue中的双向绑定v-model指令
一.v-model的作用和使用场景 1.1 v-model指令介绍 期望的绑定值类型:根据表单输入元素或组件输出的值而变化 可以下下面元素使用: <input> <select> ...
- Angular中input双向绑定
input双向绑定 <!-- input监听事件 msg不是实时触发 --> <!-- 1.改变时触发 --> <div><input type=" ...
- DelphiXe5中的双向绑定
在Delphi下等这一功能很久了,虽然C#下早已实现了这一功能.但是在Dephi下尝试这项功能时还是有些许的激动.闲言少絮,直接上代码. unit BindingDemo; interface use ...
- 前端学习(3208):react中的事件绑定
最新文章
- 人群行为分类数据库--Novel Dataset for Fine-grained Abnormal Behavior Understanding in Crowd
- 浅析机器学习中的自由度
- 4-玩转数据结构-链表
- SignalR学习笔记(三)Self-Host
- linux userdel删除用户命令
- 线程----BlockingQueue (转)
- 分布式数据库CAP原理和Base
- 送花(洛谷 2073)
- Vue第二部分(2):组件的嵌套与通信
- java eclipse
- 干货:资深架构师教你一篇文看懂Hadoop
- 融合应急指挥调度系统
- 智能功放 ACS 保护
- FPGA中的乒乓操作
- Android Killer中apktool插件更新
- 生态圈——小组制组织结构思考
- 手动装机太麻烦?别慌Cobbler自动装机来帮你
- NPN三极管和N沟道MOS管引脚定义
- 聪明的数据结构和笨拙的逻辑代码
- 08 基础代谢率计算