Question

这是我正在处理的代码。

如何访问容器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>
);
 }
}

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

Answer 2

我认为你可以做这样的事情

renderRecipes() {
  return this.props.recipes.map(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(recipe.idMeal)}>
          View Recipe Details
        </button>
      </div>
    </div>
   )
 })
}

现在，在onClick功能中，您将收到密钥！

Answer 3

我认为您可以通过以下方式定义viewRecipe方法：

viewRecipe = recipe => e => console.log(recipe)

viewRecipe将是一个函数，它接收配方作为参数，并返回另一个将用于onClick方法的函数：

<button className="btn btn-outline-primary" onClick={this.viewRecipe(recipe)}>

或者您也可以使用以下文档中描述的techniques：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

ReactJS - 点击容器div的访问键？

3 个答案: