1、实现数据双向绑定

  将input组件与this.state属性绑定,要么是readonly, 要么使用onChange事件;

  获取input元素的value值,有两种方式:

  1) e.target.value

  2)  this.refs.引用名称

import React from 'react'

export default class Hello6 extends React.Component {
constructor() {
super()
this.state = {
msg: '测试数据双向绑定'
}
}
render() {
return <div>
基于class创建组件, {this.props.id} + '--' + {this.props.name}
<h4>{this.state.msg}</h4>
{/* 将input组件与this.state属性绑定,要么是readonly, 要么使用onChange事件 */}
{/* <input type="text" name="msg" value={this.state.msg} onChange={ (e) => this.inputChangeHandler(e) } ref="btn" /><br/><br/> */}
       <input type="text" name="msg" value={this.state.msg} onChange={ (e) => this.inputChangeHandler(e) } ref={input=> this.msgInputObj = input} /><br/><br/>
{/* 测试点击事件 */}
<button id="btn" onClick={ () => this.myOnclickHandler(this.state.msg) }>测试点击事件</button> </div>
} myOnclickHandler = (msg) => {
console.log(msg)
console.log(this.state.msg)
this.setState({msg:'msg被修改了。。。'}, function () {
console.log(this.state.msg)
})
} inputChangeHandler = (e) => {
// 获取input的value属性的第一种方式
// console.log(e.target.value) // 获取input的value属性的第二种方式
// 使用ref获取元素的引用
// console.log(this.refs.btn.value)
     // 获取input的value属性第三种方式
     console.log(this.msgInputObj.value)
// 同步数据
const newVal = e.target.value
this.setState({msg: newVal}, function() {
console.log("调用this.state完成同步数据"
)
})

} }

React之this.refs, 实现数据双向绑定的更多相关文章

  1. react 实现数据双向绑定

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

  2. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  3. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  4. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  5. 前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  6. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  7. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  8. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

随机推荐

  1. springboot 论坛项目

    项目演示地址:http://www.mawen.co/ 快速搭建sprintboot项目 运行第一个springboot项目 leaf package hello; import org.spring ...

  2. 从入门到自闭之Python--MySQL数据库的操作命令

    命令: mysqld install; 配置数据库 net start mysql;启动数据库 mysql -uroot -p; 以root权限启动数据库,-p之后输入密码 mysql -uroot ...

  3. 【动态规划】Mathematical Curse

    [来源]:2018年焦作网络赛B [题意]: 有n个数字,有m个符号运算.通过不回头(即选取m个数有顺序可言),消除巫术的,并达到最大的价值. 其实意思就是在数组里选取一段子序列,然后进行m次加减乘除 ...

  4. Jmeter之Plugin插件,服务器监控

    Jmeter Plugins插件 我在测试工作中:主要使用了监听器中的图表报告和监控服务器CPU,内存(这篇博文就是对插件的安装,以及jmeter怎么监控服务器CPU~) 1.下载安装Plugins插 ...

  5. X86逆向12:内存补丁的制作

    本章我们将学习各种打补丁的方式,补丁在软件的破解过程中非常的重要,比如软件无法脱壳我们就只能通过打补丁的方式来破解程序,补丁原理就是当程序运行起来会被释放到内存并解码,然后补丁就通过地址或特征码定位到 ...

  6. Spring 的 Bean 管理(XML 方式)

    Spring 的 Bean 管理(XML 方式) 1. 三种实例化 Bean 的方式 使用类构造器实例化(默认无参数) 使用静态工厂方法实例化(简单工厂模式) 使用实例工厂方法实例化(工厂方法模式) ...

  7. CSM(Certified Scrum Master) 敏捷认证是什么?

    Scrum 是用于开发和持续支持复杂产品的一个框架.Scrum 基于试验性过程控制理论,借鉴了精益思想.时间盒.模块化设计等,并完整地体现了敏捷宣言和敏捷原则.Scrum 采用一种迭代.增量式的方法来 ...

  8. 怎样理解 MVVM ( Model-View-ViewModel ) ?

    MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM的一些肤浅的认识. 1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery ...

  9. JS基础_自增自减练习

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. wpf GeometryDrawing 绘制文字

    <GeometryDrawing x:Key="GeometryDrawingText"> <GeometryDrawing.Geometry> <R ...