好客租房29-从jsx中抽离事件处理程序
从jsx中抽离过多js逻辑代码 会显得非常混乱
推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
//初始化state
state = {
geyao: 0,
}
//抽离出来 this报错 事件处理中的this为underfine
handleNum() {
this.setState({
geyao: this.state.geyao + 1,
})
}
render() {
return (
<div>
<h1>{this.state.geyao}</h1>
<button onClick={this.handleNum}>点击加一</button>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
好客租房29-从jsx中抽离事件处理程序的更多相关文章
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- CS中委托与事件的使用-以Winform中跨窗体传值为例
场景 委托(Delegate) 委托是对存有某个方法的引用的一种引用类型变量. 委托特别用于实现事件和回调方法. 声明委托 public delegate int MyDelegate (string ...
- 好客租房15-jsx中的条件渲染
jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from &q ...
- 好客租房25-react中的事件处理(事件对象)
3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react import React from 'react' ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 利用模板将HTML从JavaScript中抽离
利用模板将HTML从JavaScript中抽离 一.当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签) 该方法将模板放置于服务器中使用XMLHttpRequest对 ...
- Leetcode - 剑指offer 面试题29:数组中出现次数超过一半的数字及其变形(腾讯2015秋招 编程题4)
剑指offer 面试题29:数组中出现次数超过一半的数字 提交网址: http://www.nowcoder.com/practice/e8a1b01a2df14cb2b228b30ee6a92163 ...
- 在react jsx中,为什么使用箭头函数和bind容易出现问题
在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...
- 在react jsx中使用if判断
在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...
随机推荐
- 【HTML5版】导出Table数据并保存为Excel
首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求,要把<tab ...
- Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计
搜索引擎是个好东西,GIS也是个好东西.当前还有Django和Ionic.最后效果图 构架设计 对我们的需求进行简要的思考后,设计出了下面的一些简单的架构. GIS架构说明 -- 服务端 简单说明: ...
- ubantu之Git使用
本文讲述在Ubuntu 14.04 x64环境下,如何安装Git,配置连接GitHub,并且上传本地代码到github. 一. 注册Git账户以及创建仓库 要想使用github第一步当然是注册gith ...
- CSS简单样式练习(六)
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- E-R图转换为关系模型
E-R模型如何转换成关系模型,这里我们分成三种情况进行讲解,分别是一对一,一对多和多对多. 1.一对一的情况: 有两种方法解决这个问题.第一个方法:可以单独对应一个关系模式,由各实体的主码构成关系模式 ...
- 浅谈arguments属性callee
1.首先 arguments 是一个对应于传递给函数的参数的类数组对象 2. arguments.callee 属性包含当前正在执行的函数. 描述 callee 是 arguments 对象的一个属性 ...
- Taro开发微信小程序遇到的问题和解决方法
1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...
- python2.7安装pyinstaller
python2.7直接安装pyinstaller会报错,版本4与python2不兼容,所以我们安装时需指定兼容的pyinstaller版本号.安装命令如下: pip2 install pyinstal ...
- 循序渐进搞懂 TCP 三次握手核心
前言 本文旨在通过形象的例子和实操,把无形的.虚拟的网络转为具体的.可视化的.带领网络小白一步步的掌握 TCP 三次握手核心知识点,为后续深入学习 TCP 协议打基础. 通俗版 如下图所示,小明(客户 ...
- 帝国cms修改成https后后台登陆空白的解决办法
以下方法适用帝国cms7.5版本: 7.5版本已经有了http和https自动识别,但是因为一些疑难杂症的原因,自动识别判断的不准,后台登录也是空白, 我们可以打开e/config.php查找'htt ...