React中事件绑定this指向三种方法的实现

更新时间：2021年05月12日 09:21:40 作者：沐浴前端

这篇文章主要介绍了React中事件绑定this指向三种方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1.箭头函数

1.利用箭头函数自身不绑定this的特点;

2.render()方法中的this为组件实例,可以获取到setState();

class App extends React.Component{
    state ={
        count: 0
    }
    // 事件处理程序
    onIncrement() {
        console.log('事件处理函数中的this:',this)
        this.setState({
            count:this.state.count+1
        })
    }
    // 渲染
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
              // 箭头函数中的this指向外部环境，此处为：render()方法
                <button onClick={()=>this.onIncrement()}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

2.Function.proptype.bind()

1.利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起

class App extends React.Component{
    constructor() {
        super()
        // 数据
        this.state ={
            count: 0
        }
        // 第一中方法.bind 改变this指向,返回一个函数,不执行该函数
        this.onIncrement = this.onIncrement.bind(this)
    }
     // 事件处理程序
     onIncrement() {
         console.log('事件处理函数中的this:',this)
         this.setState({
             count:this.state.count+1
         })
     }
    // 渲染
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

3.class的实例方法

1.利用箭头函数形式的class实例方法

2.该语法是实验性语法,但是由于babel的存在就可以直接使用

class App extends React.Component{
    constructor() {
        super()
        // 数据
        this.state ={
            count: 0
        }
    }
      // 事件处理程序 
      onIncrement=()=> {
        console.log('事件处理函数中的this:',this)
        this.setState({
            count:this.state.count+1
        })
    }
    // 渲染
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

到此这篇关于React中事件绑定this指向三种方法的实现的文章就介绍到这了,更多相关React 事件绑定this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React this.setState方法使用原理分析介绍
我们知道，在React中没有像Vue那种数据双向绑定的效果。而this.setState方法就是用来对数据进行更改的。而通过this.setState方法更改的数据，会让组件的render重新渲染，并且刷新数据
2022-09-09
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
reactjs学习解决unknown at rule @tailwind css
这篇文章主要介绍了reactjs学习解决unknown at rule @tailwind css问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React报错之Object is possibly null的问题及解决方法
这篇文章主要介绍了React报错之Object is possibly null的问题,造成 "Object is possibly null"的错误是因为useRef()钩子可以传递一个初始值作为参数，而我们传递null作为初始值，本文给大家分享详细解决方法，需要的朋友可以参考下
2022-07-07
使用Webpack打包React项目的流程步骤
随着React应用日益复杂,开发者需要借助模块打包工具来管理项目依赖、转换代码和优化性能,Webpack是一款功能强大的模块打包器,它可以将React项目中的JavaScript、CSS、图片等资源打包成浏览器友好的文件,本文将全面介绍如何使用Webpack打包React项目
2025-03-03
一文详解React Redux使用方法
这篇文章主要介绍了一文详解React Redux使用方法，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
利用ES6语法重构React组件详解
这篇文章主要介绍了利用ES6语法重构React组件的相关资料，文中通过示例代码介绍的很详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。
2017-03-03
使用store来优化React组件的方法
这篇文章主要介绍了使用store来优化React组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
React中绑定this并给函数传参的三种方式
React中定义一个组件,可以通过ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,绑定this是react中非常重要的一部分,React中,绑定this的方式有多种,下面一一看看怎么进行this绑定并给函数传参,需要的朋友可以参考下
2025-07-07
React Native之ListView实现九宫格效果的示例
本篇文章主要介绍了React Native之ListView实现九宫格效果的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08