从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中抽离事件处理程序的更多相关文章

  1. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  2. CS中委托与事件的使用-以Winform中跨窗体传值为例

    场景 委托(Delegate) 委托是对存有某个方法的引用的一种引用类型变量. 委托特别用于实现事件和回调方法. 声明委托 public delegate int MyDelegate (string ...

  3. 好客租房15-jsx中的条件渲染

    jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from &q ...

  4. 好客租房25-react中的事件处理(事件对象)

    3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react     import React from 'react'   ...

  5. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  6. 利用模板将HTML从JavaScript中抽离

    利用模板将HTML从JavaScript中抽离 一.当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签) 该方法将模板放置于服务器中使用XMLHttpRequest对 ...

  7. Leetcode - 剑指offer 面试题29:数组中出现次数超过一半的数字及其变形(腾讯2015秋招 编程题4)

    剑指offer 面试题29:数组中出现次数超过一半的数字 提交网址: http://www.nowcoder.com/practice/e8a1b01a2df14cb2b228b30ee6a92163 ...

  8. 在react jsx中,为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  9. 在react jsx中使用if判断

    在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...

随机推荐

  1. 【HTML5版】导出Table数据并保存为Excel

    首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求,要把<tab ...

  2. Django ElasticSearch Ionic 打造 GIS 移动应用 —— 架构设计

    搜索引擎是个好东西,GIS也是个好东西.当前还有Django和Ionic.最后效果图 构架设计 对我们的需求进行简要的思考后,设计出了下面的一些简单的架构. GIS架构说明 -- 服务端 简单说明: ...

  3. ubantu之Git使用

    本文讲述在Ubuntu 14.04 x64环境下,如何安装Git,配置连接GitHub,并且上传本地代码到github. 一. 注册Git账户以及创建仓库 要想使用github第一步当然是注册gith ...

  4. CSS简单样式练习(六)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. E-R图转换为关系模型

    E-R模型如何转换成关系模型,这里我们分成三种情况进行讲解,分别是一对一,一对多和多对多. 1.一对一的情况: 有两种方法解决这个问题.第一个方法:可以单独对应一个关系模式,由各实体的主码构成关系模式 ...

  6. 浅谈arguments属性callee

    1.首先 arguments 是一个对应于传递给函数的参数的类数组对象 2. arguments.callee 属性包含当前正在执行的函数. 描述 callee 是 arguments 对象的一个属性 ...

  7. Taro开发微信小程序遇到的问题和解决方法

    1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...

  8. python2.7安装pyinstaller

    python2.7直接安装pyinstaller会报错,版本4与python2不兼容,所以我们安装时需指定兼容的pyinstaller版本号.安装命令如下: pip2 install pyinstal ...

  9. 循序渐进搞懂 TCP 三次握手核心

    前言 本文旨在通过形象的例子和实操,把无形的.虚拟的网络转为具体的.可视化的.带领网络小白一步步的掌握 TCP 三次握手核心知识点,为后续深入学习 TCP 协议打基础. 通俗版 如下图所示,小明(客户 ...

  10. 帝国cms修改成https后后台登陆空白的解决办法

    以下方法适用帝国cms7.5版本: 7.5版本已经有了http和https自动识别,但是因为一些疑难杂症的原因,自动识别判断的不准,后台登录也是空白, 我们可以打开e/config.php查找'htt ...