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()。

Tips not related to your question

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

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

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

这样 React 可以优化其渲染并停止在您的浏览器控制台上为您提供 warning/errors。

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

Answer 2

你的代码有几个错误

您应该传递给 onClick 对函数的引用，但是您调用它并且结果传递给 onClick - 但结果是 undefined(onClick={ undefined }) 这就是点击不起作用的原因。要解决此问题，您可以使用 .bind
```
onClick={ this.handleClick.bind(this, items[i]) }
```
或arrow function
```
onClick={ () => this.handleClick(items[i]) }
```
在 React 中设置 class 属性你应该使用 className 属性而不是 class
```
<ul className="list-inline">
```

Example

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

ReactJS - error passing an argument to a function

javascript

jsx