react中改变事件中this指向的方法

最新推荐文章于 2024-04-18 03:52:52 发布
最新推荐文章于 2024-04-18 03:52:52 发布
阅读量273 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangdong9395/article/details/109054342
版权

抽离事件方法，下方代码会报错，原因是this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        // 将处理方法抽离出来
        class Hello extends React.Component {

            constructor() {
                super()
                this.state = {
                    count: 1

                }
            }
            handleClick() {
                // console.log(this)  //  这里的this为undefined，控制台报错
              this.setSate({
                  count: this.state.count + 1
              })
            }


            render() {
                return (
                    <button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
                )
            }
        }

        ReactDOM.render(<Hello />, document.getElementById('root'))

    </script>
</body>

</html>


方法一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        // 将处理方法抽离出来
        class Hello extends React.Component {

            constructor() {
                super()
                this.state = {
                    count: 1

                }
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick() {
                // console.log(this)  
              this.setSate({
                  count: this.state.count + 1
              })
            }


            render() {
                return (
                    <button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
                )
            }
        }

        ReactDOM.render(<Hello />, document.getElementById('root'))

    </script>
</body>

</html>

方法二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        // 将处理方法抽离出来
        class Hello extends React.Component {

            constructor() {
                super()
                this.state = {
                    count: 1

                }
            }
             handleClick = () => {
                 this.setState({
                     count: this.state.count + 1
                 })
             }
            render() {
                return (
                    <button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
                )
            }
        }

        ReactDOM.render(<Hello />, document.getElementById('root'))

    </script>
</body>

</html>
dong.wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React添加点击事件、改变this指向
MagicGirl
09-27 376
方法1 import React, { Component } from 'react' class ClickComponent extends Component { constructor(props){ super(props) this.state ={ msg: '这是一个标题' } } ...
React改变this指向的三种方法
qq_39233028的博客
11-06 650
组件名称Home.js 基本代码; importReactfrom"react"; classHome1extendsReact.Component{ constructor(props){ super(props); this.state={ msg:'zhesh' } } render(){ ...
React中 事件绑定this指向三种方法，最新BAT大厂面试者整理的前端面试题目模板
最新发布
04-18 442
1.利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起。// 第一中方法.bind 改变this指向,返回一个函数,不执行该函数。// 箭头函数中的this指向外部环境，此处为：render()方法。console.log(‘事件处理函数中的this:’,this)console.log(‘事件处理函数中的this:’,this)2.该语法是实验性语法,但是由于babel的存在就可以直接使用。朋友，可以添加V获取：vip1024c （备注前端）**
react事件中的this指向
xiaoqingrong的博客
06-24 644
我们以点击事件为例，点击按钮触发事件，事件执行方法写法如下： 然后成功的打印了出来。这只是简单的执行方法。如果你想对数据进行获取或者操作，必定要使用this指向。如下： 很不幸，这样会出错的。 这是什么导致呢。当我们打印this之后发现它的值为undefined 所以，此时需要改变this的指向，常见有下面三种方法： 第一种：使用bind来指明当前this的指向。 第二种：在构造函数...
四种方法改变react组件中方法this的指向
MS6324_ZAKU的博客
02-25 785
改变react组件中方法的指向 在react的class中(一般用class作为构造函数的语法糖),我们经常会遇到引用方法的情况,比如下面这个demo: 他的效果是,当我点击按钮,控制台输出’这个是信息’ class App extends React.Component { constructor(){ super() this.state = { } } render(){ ret
React中this指向问题及解决方法
m0_58626552的博客
09-14 366
React中this指向问题及解决方法
react中解决this指向问题的四种方法
尘生杜若
03-03 6702
相信大家在学习和使用react的过程中，稍不注意就会出现this指向错误的问题，这个问题虽然比较好解决，但是还是让人比较头疼，那么下面就说一下解决这个问题的四种写法。 一.行间定义事件后面使用bind绑定this run(){ alert("第一种方法！") } &lt;button onClick={this.run.bind(this)}&gt;第一种&lt;/b...
React中 事件绑定this指向三种方法
清风的博客
12-15 938
事件绑定 this 指向三种方法 1.箭头函数 1.利用箭头函数自身不绑定this的特点; 2.render()方法中的this为组件实例,可以获取到setState(); class App extends React.Component{ state ={ count: 0 } // 事件处理程序 onIncrement() { ...
react事件中怎么传参？修改this指向？
weixin_62460148的博客
07-27 431
react事件中如何传参以及在react事件中this为undefined如何解决
深入理解React中es6创建组件this的方法
11-23
2. **在事件处理器中使用`bind()`**：另一种方法是直接在事件处理属性中绑定`this`，如`<div onClick={this.handleClick.bind(this)}>...</div>`。尽管这样可以避免在`constructor()`中重复绑定，但它要求每次渲染时...
react-react面试题之事件绑定方式.zip
03-20
在React的类组件中，事件处理函数通常作为类的方法定义，然后在 render 方法中绑定。例如，`onClick={this.handleClick.bind(this)}`。这种方式在组件实例化时会执行一次`bind`，确定`this`指向，避免了箭头函数的...
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
当你在事件处理函数中直接引用类组件的方法时，`this`的指向可能会丢失，因为JavaScript的事件处理函数内部的`this`通常指向触发事件的元素。为了解决这个问题，可以在事件处理函数上使用`.bind()`方法显式地绑定`...
04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值
03-01
在React中，处理事件、定义方法、获取和改变数据以及执行方法并传递参数是开发过程中不可或缺的部分。让我们深入探讨这些关键概念。 首先，React事件处理与传统的DOM事件处理有所不同。在React中，我们不直接在元素...
react子组件向父组件传值
热门推荐
dongwang的博客
10-14 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac
setState用法总结
dongwang的博客
12-21 4106
1. setState传参 setState中，第一个参数可以传入对象，也可以是函数，第二个为可选参数，参数为一个回调函数，那么什么场景下传入对象？什么场景下使用函数，什么场景下需要传入第二个参数呢？ 如果state的更新不依赖于之前的state中的值，使用对象 如果state的更新依赖之前state中的值，则第一个参数传入函数 如果state更新完成后立马需要使用state的值，则需要传入第二个参数 2. setState是同步还是异步 如果在react生命周期函数中使用setState或者直接在re
react中表单验证
dongwang的博客
12-03 2109
<Form.Item name="username" // 声明式表单验证 rules={[ { required: true, message: '用户名不能为空', }, { max: 12, .
react-router中withRouter的作用
dongwang的博客
11-04 1274
作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上 使用场景： 默认情况下，只有通过路由匹配到的组件中才存在this.props, 如果要在非路由匹配的组件中使用编程式导航进行路由跳转，则可以使用withRouter对组件进行包装 ...
react中路由重定向
dongwang的博客
10-31 1225
react的事件处理为什么要bind this 改变this的指向？
06-06
在 React 中，事件处理程序默认情况下不会绑定 `this` 的值，因此当事件被触发时，`this` 将指向 `undefined` 或全局对象，这可能会导致错误。为了避免这种情况，我们需要手动绑定 `this` 的值。其中一种方法是使用 `bind` 方法将 `this` 绑定到事件处理程序函数中。例如： ``` class MyComponent extends React.Component { handleClick() { console.log(this); // this指向组件实例 } render() { return ( <button onClick={this.handleClick.bind(this)}>Click me</button> ); } } ``` 另一种方法是使用箭头函数来定义事件处理程序，因为箭头函数会继承其父作用域的 `this` 值。例如： ``` class MyComponent extends React.Component { handleClick = () => { console.log(this); // this指向组件实例 } render() { return ( <button onClick={this.handleClick}>Click me</button> ); } } ``` 无论哪种方法，目的都是确保事件处理程序中的 `this` 值指向组件实例，以便我们可以访问组件状态和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值