react中this的绑定

最新推荐文章于 2023-02-23 14:41:21 发布
最新推荐文章于 2023-02-23 14:41:21 发布
阅读量82 收藏
点赞数
分类专栏： 前端(HTML 文章标签： 前端 react.js react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulang68/article/details/121531985
版权
本文展示了React组件中处理点击事件的几种常见方法，包括在构造函数中绑定`handleClick`方法，使用箭头函数直接定义在类方法中，以及在事件处理器中使用`bind(this)`。每种方法都确保了`this`在回调函数中的正确引用，以便能够访问组件的属性和方法，例如通过`this.refs`获取输入框并设置焦点。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</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="example"></div>

    <script type="text/babel">
      class MyComponent extends React.Component {
        // constructor(props) {
        //   super(props);
        //   // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
        //   this.handleClick = this.handleClick.bind(this);
        // }
        // handleClick() {
        //   console.log("haha");
        //   console.log(this);
        //   // 使用原生的 DOM API 获取焦点
        //   //   this.refs.myInput.focus();
        // }

        handleClick = () => {
          console.log("this is:", this);
        };
        render() {
          //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
          return (
            <div>
              <input type="text" ref="myInput" />
              <input
                type="button"
                value="点我输入框获取焦点"
                onClick={this.handleClick}
              />
            </div>
          );
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById("example"));
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</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="example"></div>

    <script type="text/babel">
      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
          this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
          console.log("haha");
          console.log(this);
          // 使用原生的 DOM API 获取焦点
          //   this.refs.myInput.focus();
        }

        // handleClick = () => {
        //   console.log("this is:", this);
        // };
        render() {
          //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
          return (
            <div>
              <input type="text" ref="myInput" />
              <input
                type="button"
                value="点我输入框获取焦点"
                onClick={this.handleClick}
              />
            </div>
          );
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById("example"));
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</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="example"></div>

    <script type="text/babel">
      class MyComponent extends React.Component {
        handleClick() {
          console.log("haha");
          console.log(this);
          // 使用原生的 DOM API 获取焦点
          //   this.refs.myInput.focus();
        }

        // handleClick = () => {
        //   console.log("this is:", this);
        // };
        render() {
          //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
          return (
            <div>
              <input type="text" ref="myInput" />
              <input
                type="button"
                value="点我输入框获取焦点"
                onClick={this.handleClick.bind(this)}
              />
            </div>
          );
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById("example"));
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</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="example"></div>

    <script type="text/babel">
      class MyComponent extends React.Component {
        handleClick() {
          console.log("haha");
          console.log(this);
          // 使用原生的 DOM API 获取焦点
          //   this.refs.myInput.focus();
        }

        // handleClick = () => {
        //   console.log("this is:", this);
        // };
        render() {
          //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
          return (
            <div>
              <input type="text" ref="myInput" />
              <input
                type="button"
                value="点我输入框获取焦点"
                onClick={() => {
                  this.handleClick();
                }}
              />
            </div>
          );
        }
      }

      ReactDOM.render(<MyComponent />, document.getElementById("example"));
    </script>
  </body>
</html>

在这里插入图片描述
这个这个方法本身就在子组件上，所以是子组件触发的，所以我们要改变this的指向，所以要绑定一下。

前端交互仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础12 React中的this绑定
多啦的博客
05-12 273
已同步到个人博客，欢迎访问。 为什么要bind(this) React的Class组件中常常会用到bind(this)来绑定this，但是究竟为什么要这么做呢？难道Class中的方法拿不到实例的this吗？ 来试验一下： class Person { constructor(name) { this.name = name; } say() { console.lo...
【长文总结】关于this指向的一点总结（含react中this绑定）
Voiceu的博客
02-15 359
根据promise的excutor得到的疑问，进行验证，初次手写promise的时候会出现，回调函数的this指向window的情况，要在promise内部把this用self暂存，所以出现下面的验证 let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('1') }, 1000); }) 问题描述： 1.构造函
react中如何绑定this方法整理
小怪兽
02-26 384
方法一： ES6中可以在构造函数中，直接将当前组件（或者叫类）的实例与函数绑定 示例代码： 方法二： 在方法编写结尾的时候绑定this 示例代码： 方法三： 在方法调用的时候绑定this 示例代码： 方法四： ES6中的箭头函数（个人觉得：方便好用） 示例代码： ...
React 函数的 this 绑定
m0_71902265的博客
12-17 120
react 中的 this 绑定
react绑定this的5种方法总结
最新发布
song854601134的博客
02-23 745
使用ES5方式创建组件绑定this的方法 render方法调用的时候使用.bind(this)进行绑定 render方法调用的时候使用箭头函数进行绑定 在构造函数中进行显式绑定this.xxx.bind(this) 在定义函数的时候使用箭头函数定义
react绑定this_React绑定模式：处理“ this”的5种方法
07-08 258
react绑定thisJavaScript’s this keyword behavior has confused developers for ages. JavaScript的this关键字行为使开发人员困惑了很长时间。 There are at least five ways to handle the this context in React. Let’s consider the ...
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
在React开发过程中，经常遇到的一个常见问题是`this`作用域问题，这通常发生在类组件的方法中，导致无法访问到组件的`state`或`props`。本文将详细讲解三种解决在React中`this`作用域问题并传参的方法。 ### 方法一...
React中this丢失的四种解决方法
10-17
在React中，开发者经常会遇到this关键字的绑定问题，尤其是当涉及到事件处理和回调函数时，常常会因为JavaScript的作用域和this指向问题导致this丢失。这种情况会导致无法访问组件的实例属性和方法，进而引发错误。 ...
详解react关于事件绑定this的四种方式
08-27
这种方式可以自动绑定this，因为箭头函数的 this 绑定到定义该函数的作用域中。 React 事件绑定this 的四种方式都可以实现this的绑定，但是每种方式都有其优缺点，需要根据实际情况选择合适的方式。
React中绑定this的几种方式
lx199509的博客
03-26 355
1.第一种方式，直接用bind绑定 <div onClick={this.handleClick.bind(this)}>第一种方式</div> bind可以不调用函数，第一个参数为当前作用域的this，后面的参数为函数调用时传递的参数。 2.在constructor构造函数里面更改引用 constructor(props){ super(props) this.state = {} this.handleClick = this.handleC...
【React】绑定this的5种方法总结
weixiaohuai的博客
05-15 1655
一、简介 React中定义一个组件，可以通过ES6版本以前的React.createClass或者ES6的class xxxextends React.Component。如果使用ES6并且react版本在16以上，推荐采用class的方式，代码结构更加清晰，可读性强，而且React官方也推荐使用这种方式定义组件。 绑定this是react中非常重要的一部分。React中，绑定this的方式...
React.js绑定this的5种方法
明月如霜丶
12-04 644
this在javascript中已经相当灵活，把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。 1.使用React.createClass 如果你使用的是React 15及以下的版本，你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上 const App = React.create...
react类组件中this的绑定
qq_61233877的博客
04-08 920
react 类组件中 this 的绑定
React绑定this的三种方式
大灰狼的小绵羊哥哥的博客
02-24 1万+
React可以使用React.createClass、ES6 classes、纯函数3种方式构建组件。使用React.createClass会自动绑定每个方法的this到当前组件，但使用ES6 classes或纯函数时，就要靠手动绑定this了。接下来介绍React中三种绑定this的方法 bind() Function.prototype.bind(thisArg [, arg1 [
React中 事件绑定this指向三种方法
清风的博客
12-15 960
事件绑定 this 指向三种方法 1.箭头函数 1.利用箭头函数自身不绑定this的特点; 2.render()方法中的this为组件实例,可以获取到setState(); class App extends React.Component{ state ={ count: 0 } // 事件处理程序 onIncrement() { ...
React this绑定的几点思考
neoveee的博客
06-10 1720
我们在react项目开发时，通常会遇到this 绑定的问题。解决的方法总结下分为下面的三种情况： import React from 'react' export default class Demo extends React.Component{ constructor(props){ super(props); this.click1.bind(...
React事件处理函数中绑定this的bind()函数
热门推荐
Michael_Li的博客
11-28 2万+
今天在看最新的React官方教程时发现了一个问题，开始全面使用ES6语法的React在Handling Events这节中，提到了绑定的事件处理函数要现在构造函数中使用bind()将this进行正确的绑定，涉及到的代码如下：
react中事件处理时为什么要手动绑定this?
眼里长着太阳，笑里全是坦荡
09-28 1139
react中事件处理时为什么要手动绑定this? 之前一直没有深入研究过这个问题, 重读后仔细研究了一下这个问题. 我们都知道普通js函数中this的指向是调用函数的对象,而且是离谁近指向谁. 非严格模式下, this默认指向全局对象window 严格模式下, this为undefined 而箭头函数是在定义时就已经确定好了this的指向, 不会根据谁调用它而改变 基于此, 在react中为什么直接 onClick={this.handleClick} 不可以呢? 根本原因是react中的dom是虚拟dom
React:ES6:ES7中的6种this绑定方法
奔跑的小虎专栏
09-01 8612
React:ES6:ES7中的6种this绑定方法 转载至：http://www.open-open.com/lib/view/open1459320493676.html 对于大多数开发者来说，JavaScript 的 this 关键字会造成诸多困扰。由于 JavaScript 不具备如 Java 等语言的严格类模型，因而除非是在处理回调，否则代码中的this 指
ReactNative中绑定this的关键实践
"ReactNative中的this绑定" 在React Native开发中，`this`的绑定是一个关键的概念，尤其是在使用ES6语法时。这是因为JavaScript的类方法默认并不会自动绑定`this`上下文，这与ES5的函数有所不同。理解并正确处理`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值