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

Question

I've got the following Reactjs code. It generates an inline menu (list of elements). If I click on a particular element, I'd like it to be output in console but it does not work.

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>

    );
  }
}

There seems to be an error in calling the function

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

When I remove the function argument like below, it works fine:

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>);

Please advise.

Answer 1

It's not a ReactJS error, it's a simple JS error.

You need to pass the function reference to the onClick event. When you do <li onClick={this.handleClick({items[i]})}>{items[i]}</li> you're executing that function and passing its result to the event.

The correct call would be something like

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

That way your this scope doesn't change and you can also receive params.

Another solution would be using ES6 arrow function as:

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

What's the difference here?

Well, now you're passing a function reference (as () => {} implies) that will call your this.handleClick() afterwards.

Tips not related to your question

Firstly, you should be using className instead of class when using JSX syntax. That's easy to forget!

Secondly, it's recommended to use a key attribute whenever you're rendering elements withing a loop. So your <li> s would be:

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

This way React can optimize its rendering and stop giving you warning/errors on your browser console.

You can take further reading into keys in React docs: Fragment , Multiple Components and Reconciliation

Answer 2

In your code there are several mistakes

1. You should pass to onClick reference to function, but you call it and result is passing to onClick - but result is undefined ( onClick={ undefined } ) that's why click does not work. To solve this problem you can use .bind

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

   or arrow function

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

2. In React to set class attribute you should use className attribute instead of class

    <ul className="list-inline"> 

Example