React：如何將參數傳遞給回調

Question

我有一個反應組件內的元素列表，我希望它們是可點擊的。 點擊后，我調用一些外部函數在參數中傳遞項目ID：

render () {
  return (
    <ul>
      {this.props.items.map(item => (
        <li key={item.id} onClick={() => {doSomething(item.id)}></li>
      ))}
    </ul>
  )
}

此代碼有效，但它有一個很大的性能缺點：每次調用render時都會創建許多新的匿名函數。

如何在仍然能夠提供item.id同時將doSomething函數作為參考item.id給它？

Answer 1

您可以使用數據屬性 ，在使用相同功能時在每個項目上設置正確的ID：

function doSomethingFromEvent(event){
  return doSomething(event.target.dataset.id);
}

render () {
  return (
    <ul>
      {this.props.items.map(item => (
        <li key={item.id} data-id={item.id} onClick={doSomethingFromEvent}></li>
      ))}
    </ul>
  )
}

在元素中設置data-*屬性時，您可以使用散列的形式將dataset取回。 例如，在doSomethingFromEvent我有event.target.dataset = {id: *id*} 。 在MDN上查看更多信息

使用<li key={item.id} data-myattriute={myvalue} onClick={this.handleClick}></li>更新哈希（例如狀態）時更加清晰，我可以簡單地定義handleClick如：

handleClick(event){
    // Here event.target.dataset = {myattribute: myvalue}

    Object.assign(myObject, event.target.dataset);
    // or
    this.setState(event.target.dataset);
}

回到你的問題，這種方法的好處在於，如果你確保你的容器元素（ul）不能在數據屬性（li）的子項外部點擊，這是你的情況，你可以在其上聲明函數：

render () {
  return (
    <ul onClick={doSomethingFromEvent}>
      {this.props.items.map(item => (
        <li key={item.id} data-id={item.id}></li>
      ))}
    </ul>
  )
}

現在您的功能只創建一次，甚至不會在每個項目中重復。

Answer 2

您可以為數組中的每個項創建一個新組件並使用props， 如下所示 ：

class Li extends React.Component {
  render() {
    return <li onClick={this.onClick}> {this.props.children} </li>;
  }
  onClick = () => {
    console.log(this.props.item);
  };
}

class App extends React.Component {
  state = {
    items: [
      {id: 1, name: 'one'},
      {id: 2, name: 'two'},
      {id: 3, name: 'three'},
    ]
  };
  render() {
    return <ul> 
      {this.state.items.map(i => 
        <Li key={i.id} item={i}>{i.name}</Li>
      )} 
    </ul>;
  }
}

Answer 3

你可以做的是創建一個部分應用或更高階的函數來封閉item.id並傳遞它。 那么讓我們來看看這個玩具的例子：

class App {

   partiallyApplied = id => e => {
     console.log(id,'this is passed in first')
     console.log(e,'this is passed in second')
   }

   render(){
     return (
       <button onClick={this.partiallyApplied(1234)}>Click Me</button>
     )
   }

}

現在您可以訪問1234以及您的event對象

這是使用transform-class-properties babel插件。 如果不使用或不能使用它，你可以做這樣的事情：

partiallyApplied(id){
  return function(e){
   console.log(id,'this is id')
   console.log(e,'this is event')
  }
}

但是你必須在通話期間綁定this ，我不喜歡到處都是這樣。