在 React 中使用常规函数未触发 onClick 操作

Question

我正在尝试从一组对象中呈现一系列按钮。

const numbers = 
[{
key:"C",
id:"clear"
},{
key:"/",
id:"divide"
},
{
key:"*",
id:"multiply"
}]

我尝试使用常规函数。它呈现按钮，但不会触发点击操作。

{numbers.map( function(item) {
          return (<button class="button btn btn-light" id={item.id} onClick={this.handleClick}>{item.key}</button>);
        }

以下作品

  {numbers.map( item=>
               <button class="button btn btn-light" id={item.id} onClick={this.handleClick}>{item.key}</button>)
  }

我需要在常规函数中更改什么才能使其表现得像箭头函数？

Answer 1

我认为 this 引用在第一种情况下变坏了。在第一种情况下尝试通过记录 this 自己验证。第二个代码段是为这个特定问题设计的新 ES6 语法。如果您坚持使用第一种语法，请像下面这样添加绑定

{numbers.map( function(item) {
          return (<button class="button btn btn-light" id={item.id} onClick={this.handleClick.bind(this)}>{item.key}</button>);
        }

阅读 this 以获取有关函数上下文和 this.

的更多数据

Answer 2

问题在于常规函数声明有其自己的值 this，这将不同于它作为方法的组件实例。箭头函数之所以有效，是因为箭头函数采用了它们周围词法环境的 this。

官方 React 文档中建议的替代解决方案是使用 bind。将 this.handleClick = this.handleClick.bind(this) 放入组件的构造函数中。

Answer 3

下面的方法不起作用，因为这个上下文在常规函数中不可用。您需要绑定它，以便它可用。

此外，class 保留用于在反应中声明组件，因此要向 jsx 元素添加 css class 名称，您必须使用 className 而不是 class.

此外，当您在循环内渲染 jsx 元素时，您必须将唯一键添加到最顶层元素

另外，如果 handleClick 是代码中的常规函数，请确保在构造函数中绑定它。如果是箭头函数就不用手动绑定了

改变

  {numbers.map( function(item) {
      return (<button class="button btn btn-light" id={item.id} onClick={this.handleClick}>{item.key}</button>);
    })
  }

至

  {numbers.map(function(item) {
      return (<button key={item.id} className="button btn btn-light" id={item.id} onClick={this.handleClick}>{item.key}</button>);
    }.bind(this)
  )}

你问题中的第二个有效，因为它使用了箭头函数

Answer 4

在ES5中，独立函数中'this'的作用域是指window对象

var standAloneFunc = function(){alert(this)};

箭头函数的引入是为了解决 'this' 问题，其中 'this' 指的是函数本身。它利用词法范围

var standAloneFunc = () => alert(this);

所以，您的代码中的问题是 'this' 的范围。

{numbers.map( function(item) {
  return (<button class="button btn btn-light" id={item.id} onClick= 
  {this.handleClick}>{item.key}</button>);
 }

此处 'this' 的范围指的是 window 对象。

 {numbers.map( item=>
           <button class="button btn btn-light" id={item.id} onClick= 
     {this.handleClick}>{item.key}</button>)
 }

这里'this'的范围是指父函数本身。

在 React 中使用常规函数未触发 onClick 操作

onClick action not triggered using regular function in React

javascript

reactjs

arrow-functions