ReactJS - Fehler beim Übergeben eines Arguments an eine Funktion

Question

Ich habe den folgenden Reactjs-Code. Es erzeugt ein Inline-Menü (Liste der Elemente). Wenn ich auf ein bestimmtes Element klicke, möchte ich es in der Konsole ausgeben, aber es funktioniert nicht.

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> 

    ); 
    } 
} 

Es scheint in dem Aufruf der Funktion

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

einen Fehler zu sein, wenn ich das Funktionsargument wie unten zu entfernen, es funktioniert gut:

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

Bitte beraten.

Answer 1

Es ist kein ReactJS-Fehler, es ist ein einfacher JS-Fehler.

Sie müssen die Funktionsreferenz an das Ereignis onClick übergeben. Wenn Sie <li onClick={this.handleClick({items[i]})}>{items[i]}</li> tun, führen Sie diese Funktion aus und übergeben ihr Ergebnis an das Ereignis.

Der korrekte Aufruf wäre so etwas wie

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

Auf diese Weise Ihren this Umfang nicht ändert und Sie können auch params erhalten.

Eine andere Lösung wäre ES6 Pfeil Funktion verwenden wie:

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

Was ist der Unterschied hier ist?

Nun, Sie übergeben eine Funktionsreferenz (wie () => {} impliziert), die danach Ihre this.handleClick() aufrufen wird.

Tipps nicht zu Ihrer Frage

Zunächst sollten Sie className statt class verwenden, wenn JSX Syntax. Das ist leicht zu vergessen!

Zweitens wird empfohlen, das Attribut key immer dann zu verwenden, wenn Sie Elemente mit einer Schleife rendern. So Ihre <li> s wäre:

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

Auf diese Weise reagieren kann seine Rendering optimieren und stoppen Sie das Warnen gibt/Fehler in Ihrem Browser-Konsole.

Sie können weiter in Tasten Lesen nehmen in docs Reagieren: Fragment, Multiple Components und Reconciliation

Answer 2

In Ihrem Code gibt es mehrere Fehler

1. Sie auf onClick Bezug auf Funktion übergeben sollte, aber Sie nennen es und das Ergebnis wird onClick übergeben - aber das Ergebnis ist undefined (onClick={ undefined }), warum klicken nicht funktioniert. Um dieses Problem zu lösen Sie .bind

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

   oder arrow function

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

2. In Reaktion können Klasse festlegen Attribut sollten Sie className verwenden Attribut statt class

   <ul className="list-inline"> 
   

Example