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>将是：

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

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

您可以在React docs中进一步阅读密钥： Fragment， Multiple Components和 Reconciliation

Answer 2

在你的代码中有几个错误

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

Example

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

2 个答案: