在React中將參數傳遞給函數而不在onClick處理程序中使用箭頭功能

Question

我正在映射看起來像這樣的對象數組

events = [
   {
     id: 1,
     name: 'Real vs Barcelona'
   },
   {
     id: 2,
     name: 'Celtic vs Rangers'
   }
];

然后，我想將ID傳遞給更新相關事件的函數。 這項工作，我正在使用箭頭功能來實現。

onClick={() => this.props.updateEvent(event.id)}

render() {

    return (
      <div>
         {this.props.events.map(event => {
           return <p key={event.id} onClick={() => this.props.updateEvent(event.id)}>{ event.name }</p>
         });
      </div> 
    )
}

我已經讀過，這樣做會影響性能，而且我的es-linter也顯示錯誤。 有誰知道我可以使用這種方法並以其他方式傳遞id。我也不認為我想使用ES5 bind方法。

也許像這樣

render（）{

let updateEvent = (e) => {
  //This obviously won't work but something similar? 
  this.props.updateEvent(e.target);
}

return (
  <div>
     {this.props.events.map(event => {
       return <p key={event.id} onClick={updateEvent}>{ event.name }</p>
     });
  </div> 
)

}

Answer 1

如果您要傳遞的值是可序列化的，則可以將其分配為Chris回答中提到的屬性。

更為通用的解決方案是創建一個新組件並將數據作為道具傳遞：

class Event extends React.Component {
  _onClick = () => this.props.onClick(this.props.event.id);

  render() {
    return (
      <p onClick={this._onClick}>{ this.props.event.name }</p>
    );
  }
}

並在呼叫者中：

<div>
   {this.props.events.map(event => {
     return <Event key={event.id} event={event} onClick={this.props.updateEvent} />
   });
</div> 

Answer 2

由於事件通過了您單擊的相關DOM元素，因此您可以讀取該元素具有的任何屬性。 因此，您可以執行與帖子結尾處建議類似的操作：

 class MyApp extends React.Component { render() { let updateEvent = (e) => { console.log(e.target.dataset.name); } return ( <div> {[{id:0, name:"foo"}, {id:1, name:"bar"}].map(event => { return <p key={event.id} data-name={event.name} onClick={updateEvent}>{ event.name }</p> })} </div> ); } } ReactDOM.render(<MyApp />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

我實際上發現了我想尋找的東西。

render() {   

    return (
      <div>
         {this.props.events.map(event => {

            let updateEventHelper = () => {
               this.props.updateEvent(event.id);
            };

           return <p key={event.id} onClick={updateEventHelper}>{ event.name }</p>
         });
      </div> 
    )
}