ReactJS - 将参数传递给函数时出错

Question

我有以下 Reactjs 代码。它生成一个内联菜单（元素列表）。如果我单击特定元素，我希望它在控制台中输出，但它不起作用。

import React from "react";


export default class GalleryHeader extends React.Component {

  handleClick(cat) {
    console.log(cat);
  }
  createItems(items) {
    var output = [];
    for(var i = 0; i < items.length; i++)
      output.push(<li onClick={this.handleClick({items[i]})}>{items[i]}</li>);
    return output;
  }
  render() {

    return (
     <ul class="list-inline">
      {this.createItems(this.props.menuItems)}
     </ul>

    );
  }
}

调用函数好像出错了

{this.handleClick({items[i]})}

当我像下面这样删除函数参数时，它可以正常工作：

handleClick() {
    console.log("test");
  }
createItems(items) {
   var output = [];
   for(var i = 0; i < items.length; i++)
     output.push(<li onClick={this.handleClick}>{items[i]}</li>);

请指教。

Answer 1

这不是 ReactJS 错误，这是一个简单的 JS 错误。

您需要将函数引用传递给onClick 事件。当您执行 <li onClick={this.handleClick({items[i]})}>{items[i]}</li> 时，您正在执行该函数并将其结果传递给事件。

正确的调用应该是这样的

<li onClick={this.handleClick.bind(this, items[i])}>{items[i]}</li>

这样你的this 范围不会改变，你也可以接收参数。

另一种解决方案是使用 ES6 箭头函数：

<li onClick={() => this.handleClick(items[i])}>{items[i]}</li>

这里有什么不同？

好吧，现在您正在传递一个函数引用（正如 () => {} 所暗示的那样），之后将调用您的 this.handleClick()。

与您的问题无关的提示

首先，在使用 JSX 语法时，您应该使用 className 而不是 class。这很容易忘记！

其次，建议在使用循环渲染元素时使用key 属性。所以你的<li>s 将是：

<li key={i} onClick={() => this.handleClick(items[i])}>{items[i]}</li>

这样，React 可以优化其渲染并停止在浏览器控制台上向您发出警告/错误。

您可以进一步阅读 React 文档中的键： Fragment, Multiple Components 和 Reconciliation

Answer 2

在你的代码中有几个错误

1. 您应该将函数引用传递给onClick，但您调用它并且结果将传递给onClick - 但结果是undefined(onClick={ undefined })，这就是单击不起作用的原因。要解决这个问题，你可以使用.bind

   onClick={ this.handleClick.bind(this, items[i]) }
   

   或arrow function

   onClick={ () => this.handleClick(items[i]) }
   

2. 在 React 中设置类属性你应该使用className 属性而不是class

   <ul className="list-inline">
   

Example