解决react事件里的this指向

简介: 解决react事件里的this指向

解决指向



箭头函数


     onLog1 = () => {
  // 箭头函数解决this指向的问题
  console.log(this);
}
箭头函数:<input type="button" onClick={this.onLog1} value="提交1" />


调用时使用箭头函数


onLog2(text) {
    console.log(text);
    console.log(this);
  }
  调用时,使用箭头函数:<input type="button" onClick={() => { this.onLog2('text') }} value="提交2" />


调用时,使用bind函数


onLog3(text) {
    console.log(this);
    console.log(text);
  }
  调用时,使用bind函数:<input type="button" onClick={this.onLog3.bind(this, 'text')} value="提交3" />


通过bind改变this指向


constructor(props) {
    super(props);
    this.state = {
    }
    // 通过bind改变this指向
    this.onLog = this.onLog.bind(this)
  }
  onLog() {
    console.log(this);
  }
  通过bind: <input type="button" onClick={this.onLog} value="提交" />


相关文章
|
11月前
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
120 1
|
10月前
|
前端开发 JavaScript 开发者
React 事件处理机制详解
【10月更文挑战第23天】本文介绍了 React 的事件处理机制,包括事件绑定、事件对象、常见问题及解决方案。通过基础概念和代码示例,详细讲解了如何处理 `this` 绑定、性能优化、阻止默认行为和事件委托等问题,帮助开发者编写高效、可维护的 React 应用程序。
448 4
|
11月前
|
前端开发 JavaScript IDE
React 事件处理
10月更文挑战第8天
70 1
|
前端开发 JavaScript
react学习(19)事件处理
react学习(19)事件处理
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
前端开发 JavaScript Java
React 中的合成事件
【8月更文挑战第30天】
143 6
|
前端开发 JavaScript
React 中的事件是什么?
【8月更文挑战第30天】
168 5
|
11月前
|
前端开发 JavaScript
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
203 0
|
存储 前端开发 JavaScript
React中的事件处理(八)
【8月更文挑战第15天】React中的事件处理
95 1
|
前端开发 JavaScript 开发者
如何在 React 中处理事件?
【8月更文挑战第31天】
189 0