如何將參數傳遞給React js中的函數？

Question

1. 我想在警報窗口中顯示人員的電子郵件。但是，我不知道如何將電子郵件作爲參數傳遞給displayAlert方法。另外，它不會讓我使用。所以，我必須將displayAlert方法分配給一個變量並在onClick中使用它。我不知道爲什麼它不會讓我直接打電話給它。

   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

的ES6方式：

使用箭頭功能=>

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匿名函數被調用並執行this.displayAlert(item.email)

ES5的方式：

你可以使用.bind並在那裏傳遞參數。

你也應該通過this或使用綁定，以保持適當的環境對你.map功能：

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

圖中所示爲這裏的例子：React - Communicate Between Components

Answer 2

使用箭頭功能和巴貝爾插件「變換級-properties「

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