Come passare argomenti alle funzioni in React js?

Question

1. Desidero visualizzare l'e-mail della persona nella finestra di avviso. Ma, non so come passare email come argomenti per mostrare il metodo Alert. Inoltre, non mi permette di usare neanche. Quindi, devo assegnare metode displayAlert a una variabile e usarlo in onClick. Non so perché non mi permetta di chiamarlo direttamente.

   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

Il modo ES6:

Uso delle funzioni di direzione =>

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 la funzione anonima viene chiamata ed esegue this.displayAlert(item.email)

Il modo ES5:

È possibile farlo utilizzando .bind e passando il parametro in tale posizione.

Si dovrebbe anche passare this o utilizzare legano per mantenere il giusto contesto sul .map funzione:

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

mostrato nell'esempio qui: React - Communicate Between Components

Answer 2

Utilizzando la funzione freccia e babel plugin "trasformare classe -proprietà "

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