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

ReactJS - error passing an argument to a function

本文关键字：函数 出错 参数传递 ReactJS      更新时间：2023-09-26

我有以下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>);

请指教。

这不是 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 文档中的键：片段多个组件和和解

在你的代码中有几个错误

  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

相关文章：