React实例响应式设计和数据绑定
React实例响应式设计和数据绑定
React中的响应式设计原理和数据的绑定方法,俗话说的好:“宝剑磨的好,理论不能少”。这节课我们不仅要编写效果,还要讲理论,这节课很重要!!!,因为这涉及React中的设计思想和你以后的编程思路。
响应式设计和数据的绑定
React不建议你直接操作DOM元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操作就可以了(这也是React如此受欢迎的主要原因,大大加快了我们的开发速度)。
现在的需求是增加Xiaojiejie的服务项,就需要先定义数据。数据定义在Xiaojiejie组件中的构造函数里constructor。
constructor(props){ 构造函数// 调用父类方法,继承super(props) this.state = {inputValue:"你好", //value的数据list:[] //类表数据}}
在React中的数据绑定和Vue中几乎一样,也是采用字面量(我自己起的名字)的形式,就是使用{}来标注,其实这也算是js代码的一种声明。比如现在我们要把inputValue值绑定到input框中,只要写入下面的代码就可以了。其实说白了就是在JSX中使用js代码。
<input value={this.state.inputValue}/>
现在需要看一下是不是可以实现绑定效果,所以把inputValue赋予一个 你好,然后预览看一下效果。在这里我们并没有进行任何的DOM操作,但是界面已经发生了变化,这些都时React帮我们作的,它还会自动感知数据的变化。
绑定事件
这时候你到界面的文本框中去输入值,是没有任何变化的,这是因为我们强制绑定了inputValue的值。如果要想改变,需要绑定响应事件,改变inputValue的值。比如绑定一个改变事件,这个事件执行inputChange()(当然这个方法还没有)方法。
<input value={this.state.inputValue} onChange={this.inputChange}/>
现在还没有inputChange()这个方法,在render()方法的下面建立一个inputChange()方法,代码如下:
这时候会发现响应事件可以使用了,但是如何获得我们输入的值那,程序中输入下面的代码。
inputChange(e){console.log(e);console.log(e.target.value);
}
这时候控制台是可以打印出输入的值的,视频中会有演示。看到获得了输入的值,想当然的认为直接改变inputValue的值就可以了(错的).
inputChange(e){console.log(e.target.value);this.state.inputValue=e.target.value;
}
写完后再进行预览,会发现程序直接报错了(加项服务还真的有点难度哦,大宝剑不好作的…)。
其实我们范了两个错误:
- 一个是this指向不对,你需要重新用bind设置一下指向(ES6的语法)。或者使用箭头函数
- 另一个是React中改变值需要使用this.setState方法。
第一个错误很好解决,直接再JSX部分,利用bind进行绑定就好。
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
//使用箭头函数的方式<input value={this.state.inputValue} onChange={this.inputChange} />
这步做完,我们还需要加入setState方法,改变值。代码如下:
// 或者使用.bind(this) 绑定事件inputChange=(e)=>{console.log(e.target.value)console.log(this)this.setState({//修改数据inputValue:e.target.value})}
技术胖第一博客网站:https://jspang.com/detailed?id=46#toc220
React实例响应式设计和数据绑定相关推荐
- 从零开始学习React——(六):React响应式设计和数据绑定
本节主要介绍React中的响应式设计和数据绑定的方法. jQuery和React的区别 jQuery以事件驱动,原理是通过事件的触发来操作DOM改变页面. React 以数据驱动,为单向数据流,通过监 ...
- React实例练习-响应式设计、数据绑定、列表渲染、删除单项
服务菜单 最好的学习就是在实战中成长,做一个<小姐姐服务菜单>应用,练习前面的知识和学习新知识 新建小姐姐组件 先在SRC的目录下面,新建一个文件Xiaojiejie.js 然后写一个基本 ...
- 为什么要学习响应式设计
编者按:以下是图灵即将出版的新书<响应式Web设计:HTML5和CSS3实战>的封底文字.相信它能解答一些读者的疑问. 随着iPad mini的发布,又一个新的屏幕尺寸诞生了.用不着全面统 ...
- 是时候复习一下响应式设计了
一. 什么是响应式设计 1.针对某些设备的某些特征可以由不同的样式,通过媒体查询对页面进行重构.响应式网站是一个设计理念,它是多项技术的综合体. 2.目的是一个网站能够兼容多个终端(电脑.手机.Pad ...
- 干货 | 响应式设计在携程火车票的应用
作者简介 永利,携程开发经理,专注于Web领域的探索. 一.什么是响应式设计? 可能很多人脑海中已经出现了这样一个动画,当浏览器中页面尺寸不断变化时,内容也在随之变化.简单说,响应式网站设计是一种允许 ...
- 前端设计 响应式设计_如何响应式设计
前端设计 响应式设计 This guest post about responsive design comes from Krasimir Tsonev! 这个关于响应式设计的来宾帖子来自Krasi ...
- 一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
- 基于物理尺寸的响应式设计(转)
两种Queries之间的细微区别 比较如下两个media-query声明: @media (min-resolution: 341dpi) and (min-width: 767px) > ...
- 设计师不应该错过的响应式设计框架(含优缺点分析)
Ethan Marcotte称响应式设计是基于网格建立一个网站.Marcotte定义这项技术后,响应式设计框架开始出现,主要是css和JavaScript的结合.许多框架都是开源的,可以免费下载和快速 ...
最新文章
- 【Qt】Qt5.9.0: error: GL/gl.h: 没有那个文件或目录
- Quartz.net持久化与集群部署开发详解
- 个人学习进度(第十三周)
- 上周回顾:赛门铁克失足 微软开源对骂
- 导演李大为婚礼全过程(一)
- AngularJs通过路由传参解决多个页面资源浪费问题
- lua学习之类型与值篇
- 灵玖软件:九眼智能文档核查云平台上线了
- html range 样式,美化 input range 控制条
- 在下列数据类型中、python不支持的是_在下列数据类型中, Python不支持的是_学小易找答案...
- login.html id=9453,我关注的官网.html
- Server concepts 详解
- PDF转CAD图纸,该如何转换呢?
- 某一api全开源网站源码
- 选择信号的采样频率和信号长度的技巧
- 谷歌官方回应了,99 部手机行为艺术「捉弄」谷歌地图后续
- php录音功能,微信开发之录音功能
- Flink on Yarn的两种模式及HA
- windows、mac桌面录制GIF
- nbd 相关概念及操作