Question

我有一个呈现以下内容的组件：

render() {
  return (
    <div className = "events card" >
      <div key = {each.id}> 
        <ul>
          <li className = "card-text">Venue Name: {each.name} </li>
          <li className = "card-text">Country: {each.country} </li>
          <li className = "card-text">City: {each.city} </li>
          <li className = "card-text">Date: {each.date}</li>
        </ul>
      </div>
      <a onClick = {this.addToFavourites.bind(this)}>
        <Button text = "Add to Favourites"/>
      </a>
    </div
  );
}

addToFavourites() {
... do something
}

当我调用addToFavourites时，我想将名称，国家/地区，城市和日期传递给此函数，因为它正在经历一系列事件，因此我不知道该函数将如何执行应做的事情选定的数据。

Answer 1

这就是您可以做的：

<a onClick = {() => this.addToFavourites(each)}><Button text = "Add to Favourites"/></a>

这将确保将对象传递给addToFavourites方法。

从那里，您可以在方法本身的each中访问属性。

addToFavourites(each) {
  const { name, country, city, date } = each;
  // do the rest 
}

Answer 2

@wentjun的答案非常正确。我只想提出一个替代解决方案。

您可以将想要的参数传递给bind。但您也应该知道这两种做法都不可取。在此处Why shouldn't JSX props use arrow functions or bind?

了解更多

render() {
  return (
    <div className = "events card" >
      <div key = {each.id}> 
        <ul>
          <li className = "card-text">Venue Name: {each.name} </li>
          <li className = "card-text">Country: {each.country} </li>
          <li className = "card-text">City: {each.city} </li>
          <li className = "card-text">Date: {each.date}</li>
        </ul>
      </div>
      <a onClick = {this.addToFavourites.bind(this, each)}>
        <Button text = "Add to Favourites"/>
      </a>
    </div
  );
}

addToFavourites(each) {
  const { name, country, city, date } = each;
  // do the rest 
}

React-通过函数调用传递道具

2 个答案: