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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
json数据格式常见操作示例
Jun 13 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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
一个程序下载的管理程序(一)
2006/10/09 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
微信小程序radio组件使用详解
2018/01/31 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
三个Unix的命令面试题
2015/04/12 面试题
普通院校学生的自荐信
2013/11/27 职场文书
工作会议欢迎词
2014/01/16 职场文书
市场营销调查计划书
2014/05/02 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书