Wie übergeben Sie Argumente an Funktionen in React js?

Question

1. Ich möchte die E-Mail-Adresse der Person im Warnfenster anzeigen. Aber ich weiß nicht, wie man E-Mails als Argumente an die displayAlert-Methode weiterleitet. Außerdem wird es mich auch nicht benutzen lassen. Also, ich muss displayAlert Methos einer Variablen zuweisen und sie in onClick verwenden. Ich weiß nicht, warum ich es nicht direkt nennen darf.

   class People extends React.Component{ 
   render(){ 
        var handleClick = this.displayAlert; 
        var items = this.props.items.map(function(item) { 
         return(
          <ul key = {item.id}> 
           <li> 
            <button onClick= {handleClick}>{item.lastName + ', ' + item.firstName}</button> 
           </li> 
          </ul> 
         ) 
        }); 
        return (<div>{items}</div>); 
   } 
   
   displayAlert(){ 
       alert('Hi'); 
   } 
   } 
   
   class PersonList extends React.Component{ 
       render() { 
        return (
       <div> 
        <People items={this.props.people}/> /* People is an array of people*/ 
       </div> 
       ); 
       } 
   } 
   

Answer 1

Der ES6 Weg:

mit dem Pfeil Funktionen =>

const items = this.props.items.map((item) => (
    <ul key={item.id}> 
    <li> 
     <button onClick={() => this.displayAlert(item.email)}> 
     {item.lastName + ', ' + item.firstName} 
     </button> 
    </li> 
    </ul> 
)); 

onClick die anonyme Funktion aufgerufen wird und führt this.displayAlert(item.email)

Der ES5-Weg:

Sie könnten dies mit .bind tun und den Parameter dort übergeben.

var items = this.props.items.map(function(item) { 
    return (
    <ul key={item.id}> 
     <li> 
     <button onClick={this.displayAlert.bind(this, item.email)}> 
      {item.lastName + ', ' + item.firstName} 
     </button> 
     </li> 
    </ul> 
); 
}, this); 

Gezeigt hier im Beispiel: React - Communicate Between Components

Answer 2

mit der Pfeilfunktion und babel Plugin „transformations Klasse

Sie auch this oder benutzen Sie binden an halten den richtigen Kontext auf Ihrer .map Funktion übergeben sollen "Eigenschaften"

class People extends React.Component { 
    render() { 
    return (
     <ul> 
     { this.props.items.map((item) => (
      <li key={item.id}> 
      <button onClick={this.displayAlert(item)}> 
       {item.lastName + ', ' + item.firstName} 
      </button> 
      </li> 
     ))} 
     </ul> 
    ) 
    } 

    displayAlert = (item) => (event) => { 
    // you can access the item object and the event object 
    alert('Hi'); 
    } 
}