React学习之JSX与react事件实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了React学习之JSX与react事件。分享给大家供大家参考,具体如下:

1、JSX

1.1、表达式

在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里

const user = {
 firstName: 'Harper',
 lastName: 'Perez'
};
const element = (    //将JSX语句保存在变量中
 <h1>
  Hello, {formatName(user)}!  {/* {}中写js语句*/}
 </h1>
);

在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象,可以对其赋值或把它当作参数传递:

ReactDOM.render(
 element,        //通过JSX变量渲染react节点
 document.getElementById('root')
);

1.2、属性

JSX中可以像HTML中一样使用"字符串"的属性,也可以使用{表达式}属性:

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

注意:

1、React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。例如font-size要改为fontSize。

2、HTML中的保留字不能用于js中,例如class,应改为className:

const ele= <div className="red">Red Color</div>

3、JSX中行内样式style需要用一个对象返回,而不是字符串:

const ele=<div style="color:red">Red</div>     //会报错
const ele= <div style={{color:'red'}}>Red</div>

{{color:red}}中第一个大括号代表这是一个js表达式,第二个代表这是一个用大括号引起的对象

1.3、嵌套

如果 JSX 标签是闭合式的,那么需要在结尾处用 />:

const element = <img src={user.avatarUrl} />;

jJSX内含多个标签时,返回时需要在最外面用一个div把它们包起来:

const element = (
 <div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
 </div>
);

1.4、注释

在jsx中的注释要单独占一行,且用大括号包起来,例如:{/*注释*/},否则有可能会被当成普通文本,引起错误。

2、事件

react事件的绑定采用驼峰写法onClick={this.function}

例如定义一个切换ON/OFF的函数shiftFlag:

class Toggole extends React.Component{
 constructor(props){
  super(props);
  this.state={
   flag:true
  };
  this.shiftFlag=this.shiftFlag.bind(this);   //函数shiftFlag绑定this
 }
 shiftFlag(e){
  e.preventDefault();
  this.setState({
   flag:!this.state.flag
  });
 }
 render(){
  return <a href="#" rel="external nofollow" onClick={this.shiftFlag}>{this.state.flag?'ON':'OFF'}</a>
 }
}

注:

1、类的方法默认是不会绑定this的,直接在方法shiftFlag中使用this会报错this is undefined,因此需要为shiftFlag绑定this。

2、e是一个事件参数,使用e.preventDefault()方法来阻止a标签的默认跳转行为。

react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后。在定义函数时,事件对象e要放在最后,例如定义一个setName函数修改name为传入的参数:

class Name extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:'default'
  }
 }
 setName(name,e){   //事件e放在最后
  this.setState({
   name:name
  })
 }
 render(){
  return <button onClick={this.setName.bind(this,'tory')}>{this.state.name}</button>
 }
}

希望本文所述对大家React程序设计有所帮助。

Javascript 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
javascript 事件绑定问题
Jan 01 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
JS实现音乐导航特效
Jan 06 #Javascript
You might like
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
大专毕业生自我评价分享
2013/11/10 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
给医务人员表扬信
2014/01/12 职场文书
秋季运动会活动方案
2014/02/05 职场文书
美术国培研修感言
2014/02/12 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书