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

我认为在第一种情况下，<script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="custom-erp-id-side-nav" class="custom-erp-side-nav" @mouseover="openSideBar" @mouseleave="closeSideBar"> <nav id="custom-erp-menu-nav"> <ul id="custom-erp-menu-lists"> <li class="custom-erp-menu-list" v-on:click="toggleOpenChild"> <a href="#"> <span> <img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt=""> </span> <span class="custom-erp-menu-parent">Purchase Order</span> </a> <ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child"> <li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li> <li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li> <li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li> </ul> </li> <li class="custom-erp-menu-list" v-on:click="toggleOpenChild"> <a href="#"> <span> <img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt=""> </span> <span class="custom-erp-menu-parent">Expense</span> </a> <ul class="nav custom-erp-menu-child-dropdown" id="expense-child"> <li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li> <li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li> <li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li> </ul> </li> </ul> </nav> </div>参考会变得很糟糕。尝试先登录此来自己验证。第二个代码段是针对此特定问题设计的新ES6语法。如果您坚持使用第一种语法，请添加如下所示的绑定

this

阅读this，以获得有关函数上下文和此的更多数据。

Answer 2

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

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

Answer 3

下面的一个无效，因为该上下文在常规函数中不可用。您需要将其绑定，以便可用。

还保留了类，用于声明react中的组件，因此要将CSS类名称添加到jsx元素中，您必须使用className而不是class。

此外，当您在循环内渲染jsx元素时，必须向最上面的元素添加唯一键

如果代码中的handleClick是常规函数，还请确保在构造函数中绑定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”的范围是指窗口对象。

var standAloneFunc = function（）{alert（this）};

引入了arrow函数来解决“ 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”的范围是指窗口对象。

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

“ this”的范围是指父函数本身。

未在React中使用常规功能触发onClick操作

4 个答案: