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

Question

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

如何访问容器 div 上的 key ？现在我只是尝试 console.log 它，但最终，我需要将 key 传递给一个操作，这样我就可以调用 API。

感谢您的任何建议。

我想访问容器div上的key

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

Answer 1

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

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