javascript - ReactJS-单击容器div的访问键？

这是我现在正在处理的代码。

如何访问容器div上的密钥？现在，我只是尝试进行console.log记录，但最终，我需要将key传递给一个动作，以便可以调用API。

感谢您的任何建议。

我想访问容器div上的密钥

 renderRecipes() {
  return _.map(this.props.recipes, recipe => {
   return (
    <div className="card" style={cardStyle}  key={recipe.idMeal}>
      <img className="card-img-top" src={recipe.strMealThumb} alt="Recipe" />
      <div className="card-body">
        <h5 className="card-title">{recipe.strMeal}</h5>
        <button className="btn btn-outline-primary" onClick={this.viewRecipe}>
          View Recipe Details
        </button>
      </div>
    </div>
   )
 })
}

 render() {
  console.log(this.props.recipes);
   return (
    <div>
     <h2>Main Ingredient Search Page</h2>
     <SearchField />
     <div className="d-flex flex-row flex-wrap">
      {this.renderRecipes()}
     </div>
  </div>
);
 }
}

最佳答案

您可以使用匿名函数轻松完成此操作：

<button className="btn btn-outline-primary" onClick={() => this.viewRecipe(recipe.mealId)}>
  View Recipe Details
</button>

但是最好的方法是将配方提取到其自己的组件中。然后将其很好地封装，并且不会重新呈现onclick引用。

class Recipe extends Component {
  onViewDetails = () => {
    this.props.onItemClick(this.props.id);
  }

  render() {
    const {
      name,
      thumbnail
    } = this.props;

    return (
      <div className="card" style={cardStyle}>
        <img className="card-img-top" src={thumbnail} alt="Recipe" />
        <div className="card-body">
          <h5 className="card-title">{name}</h5>
          <button className="btn btn-outline-primary" onClick={this.onViewDetails}>
            View Recipe Details
          </button>
        </div>
      </div>
    )
  }
}

-

return _.map(this.props.recipes, recipe => (
  <Recipe
    key={recipe.idMeal}
    id={recipe.idMeal}
    thumbnail={recipe.strMealThumb}
    name={recipe.strMeal}
    onItemClick={this.viewRecipe}
  />
);

关于javascript - ReactJS-单击容器div的访问键？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49949154/