双向绑定功能是在项目中比较常见的一个需求,传统的js实现方式是添加监听函数的方式,Vue框架实现很简单,因为它本身就是基于双向绑定实现的,接下来我将讲解一下如何使用react实现双向绑定的功能是

 首先了解一下status:state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化,常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件

   好了,接下来我们就可以基于state实现react的双向绑定功能了。首先,在input框(或其他组件)上绑定一个监听函数(例如:onchange={this.change.bind(this)}),触发监听函数后

change(value){
this.setState({
name:value
})
}

这样就会改变state,重新渲染,这样就会实现双向绑定的效果了

react实现双向绑定的更多相关文章

  1. React的双向绑定

    以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式.有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建 ...

  2. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  3. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  4. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  5. react 实现数据双向绑定

    好久没有更新了 只是都写在有道笔记中 今天整理下 一些基础的 大神勿喷 一个基础的不能再基础的数据双向绑定 因为react不同于vue 没有v-model指令 所以怎么实现呢? import Reac ...

  6. React之this.refs, 实现数据双向绑定

    1.实现数据双向绑定 将input组件与this.state属性绑定,要么是readonly, 要么使用onChange事件: 获取input元素的value值,有两种方式: 1) e.target. ...

  7. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  8. Backbone.Events—纯净MVC框架的双向绑定基石

    Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...

  9. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

随机推荐

  1. Centos7 ftp环境搭建

    没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊. 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网 ...

  2. SSH 远程执行任务

    SSH 是 Linux 下进行远程连接的基本工具,但是如果仅仅用它来登录那可是太浪费啦!SSH 命令可是完成远程操作的神器啊,借助它我们可以把很多的远程操作自动化掉!下面就对 SSH 的远程操作功能进 ...

  3. 建立自己的Web service(SOAP篇)

    1.简介 这篇文章主要介绍采用SOAP来建立以及访问Web service接口. Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用 ...

  4. [刷题]Google Code Jam 2017 - Round1 C Problem A. Ample Syrup

    https://code.google.com/codejam/contest/3274486/dashboard Problem The kitchen at the Infinite House ...

  5. 关于TOE(TCP/IP Offload Engine)

    前言 昨天在电脑上抓取的报文,想进行回话,但是发现全部被设备丢弃了,没有debug信息,查看了抓包文件,原来是IP头和TCP.UDP头的检验和全部为0,也就是TOE(TCP/IP Offload En ...

  6. 关于struts2 Could not find action or result错误

    今天来配置这个S2SH框架的的时候,刚把环境搭建好,启动时并没有报错,但是当我写了一个action,我也准备通过这个action来访问页面,但是这里我访问的时候却给我报Could not find a ...

  7. python 冒泡排序,递归

    冒泡排序:li = [33, 55, 58, 66, 58, 555,20000000000000000000000, 5555,5555, 5, 6, 62,1]for i in range(1,l ...

  8. Python3.5 在Ubuntu16.04上无法画图的解决方案

    1. 问题由来 在使用下面的测试代码学习python时,用Pycharm画不出来图像,SPYDER3 可以画出来. 下面的代码来自:http://old.sebug.net/ # -*- coding ...

  9. Log4net日志记录、详细配置(自己使用)

    [来自百度百科的一句介绍]log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 1.首先添 ...

  10. 003---hibernate主要接口介绍

    Hibernate可以访问JNDI.JDBC.JTA JNDI(Java名称和目录接口):主要管理我们对象,特别是EJB应用,它会把所有EJB应用加入到JNDI这棵树上,Tomcat连接池也是把对象注 ...