React入门0x009: 事件处理

objc94 发布于2019-08-23 11:34 / 1949人阅读

摘要：概述上一章讲咯生命周期，这一章就是事件处理咯事件绑定绑定一个外部函数按钮绑定一个内部函数按钮解决函数绑定的问题上面的栗子有个问题在内无法访问内的资源，比如按钮可以这么解决这个问题按钮或者按钮或者按钮第三中方式需要支持

0x000 概述

上一章讲咯生命周期，这一章就是事件处理咯

0x001 事件绑定

// 绑定一个外部函数
function handleClick(event) {
    console.log("handleClick", event)
}

class App extends React.Component {

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

// 绑定一个内部函数
class App extends React.Component {

    handleClick(event) {
        console.log("handleClick", event, this)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

0x002 解决函数绑定的this问题

上面的栗子有个问题：在handleClick内无法访问App内的资源，比如this.state

class App extends React.Component {
    constructor(){
        super()
        this.state={
            name:1
        }
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

可以这么解决这个问题：

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

或者

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(event) {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

或者

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 1
        }
    }

    handleClick = (event) => {
        console.log("handleClick", event, this.state.name)
    }

    render() {
        return 
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

第三中方式需要babel-plugin-transform-class-properties支持：

$ npm install --save-dev babel-plugin-transform-class-properties
$ vim .babelrc
{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-class-properties"
  ]
}

0x003 做几个栗子

栗子：计数器

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 1
        }
    }

    handleClick(event) {
        this.setState({
            num: ++this.state.num
        })
    }

    render() {
        return 
            
            {this.state.num}
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

栗子2：tab 切换

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            tab: 1
        }
    }

    handleClick(tab) {
        this.setState({
            tab: tab
        })
    }

    render() {
        return 
            
            
            {
                this.state.tab === 1
                    ? tab1
                    : tab2
            }
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

0x004 事件说明

事件相关的属性名为on开头的驼峰写法，和html中的事件一致

0x005 资源

react

源码

GPU云服务器云服务器事件处理程序待处理事件多个事件处理事件处理模型有

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97150.html

React入门0x004：jsx 和数据渲染

摘要：概述在中，渲染数据的形式有多种多样，但是万变不离其中，都是用。当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由代码的自由，否则将会带来噩梦。 0x000 概述在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 这是一个文本, document.getEle...

xingpingz 2019-08-23 11:27 评论0 收藏0
React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0
es6基础0x009：模板字符串

摘要：概述模板字符串出来以后，单引号双引号哪个好的争论可以退出历史舞台的，模板字符串的最好语法单行文本多行文本内嵌表达式标签语法不太喜欢单行文本完全不单引号和双引号，当然，转义是不可避免的，有所得必有所失去嘛多行文本，也不用关系换行的编码转化问题 0x000 概述模板字符串出来以后，单引号、双引号哪个好的争论可以退出历史舞台的，模板字符串的`最好！ 0x001 语法单行文本 `str...

zhaochunqi 2019-08-23 13:07 评论0 收藏0
es6基础0x024：babel简单使用

摘要：简单的说就是，新语法编译器旧语法。说明所以，对于新特性，我们可以通过使用，也可以通过语法转化来达到兼容。 0x001 polyfill 我们都知道，js总是一直存在着兼容性问题，虽然其他语言也存在着兼容性问题，比如c++、java，但那种兼容性是新特性在旧版本上的不兼容，js则存在着各种奇形怪哉的不兼容。这其中有着非常复杂的历史和时代的原因，并不加以累述。而解决兼容性问题的方法在以前只...

wangbinke 2019-08-23 13:41 评论0 收藏0
React入门

摘要：以下内容当具备语法环境前端组件基础概念写过代码包你天上手项目下面开始地址项目结构如下的方式值得借鉴介绍一个框架让开发者可以在中写代码也就是语法称为虚拟类似一个对象挂载节点将写的虚拟变成真的每次都是新旧虚拟之间进行比较之后才会生成真实创建项以下内容,当具备ES6,JS语法,node环境,前端组件基础概念,写过java代码,包你3天上手React项目,下面开始... demo地址 htt...

VioletJack 2019-08-23 17:16 评论0 收藏0