如何在 ReactJS 中将删除函数作为道具传递

Question

我正在构建一个食谱应用，但在使用删除功能时遇到了问题。

它的工作原理是单击“添加食谱”按钮，然后会弹出一个模式，让您可以为新食谱填写一些输入字段。在该表单中是一个成分字段和一个“添加成分”按钮。您单击“添加”，该成分将添加到成分列表中。它的行为与待办事项列表完全相同，但它位于表单组件内部。我还希望能够去除一种成分。

我的应用组件结构如下：

• RecipeBook.js（父）
• RecipeCardForm.js（子）

这是位于父组件中的表单组件：

<RecipeCardForm
handleRemoveIngredients={this.handleRemoveIngredients}
/>

parent 组件中还有removeIngredient 函数：

handleRemoveIngredient = id => {
  const filteredIngredientList =  this.state.ingredientList.filter(ingredient => id !== ingredient.id);
  this.setState({ingredientList: filteredIngredientList})
  }

在 child 组件中，这是在 <ul> 中返回的，它显示了成分列表：

{this.props.ingredientList.map(ingredient => {

              return (
                <li key={ingredient.id}>
                    <span>{ingredient.amount}</span>
                    <span>{ingredient.ingredient}</span>
                    <span ><button type='button' className='btn btn-danger' 
                    onClick={ this.props.removeIngredient }>X</button></span>
                </li>
              )
            })}

由于它的结构，我无法弄清楚如何传递通常会在父组件中删除道具的删除函数中传递的 id。

通常，我会这样做：

this.state.items.map(item => {
<List
handleRemoveItem={() => this.handleRemoveItem(item.id)} />

但由于父组件中没有映射任何内容，因此我无法传递 id。

因此，当我在 removeIngredient 函数中记录 id 时，它显示为未定义。我知道它在那里。当我在添加函数中记录它时，有一个 id，当我在映射子组件中的每个成分时记录它时，它也在那里。我什至可以在删除成分按钮的 onClick 中访问它：

<button 
 type='button' 
 className='btn btn-danger' 
 onClick={ () => console.log(ingredient.id)}>Delete</button>

这也给了我 id。

我只是想不通如何在没有映射到父组件的情况下传递它，但实际上在父组件中没有什么可以映射的。当然，传递“this.state.id”只会给我一个空字符串的初始状态。

非常感谢任何帮助我了解如何做到这一点。提前致谢！

Answer 1

我认为解决您的问题的方法是将 ID 传递给 this.props.handleRemoveIngredient 函数，如下所示：

onClick={this.props.handleRemoveIngredient(ingredient.id)}

在您的示例中，您没有将成分 id 交给函数，而是调用了 this.props.removeIngredient 函数，该函数不是道具/函数的正确名称。

Answer 2

没关系，只是想通了。

解决方案确实是onClick={ () => this.props.removeIngredient(ingredient.id) }

我的问题是当我将道具传递给子组件 handleRemoveIngredient={this.handleRemoveIngredient} 时，我将它作为没有参数的函数传递 handleRemoveIngredient={() => this.handleRemoveIngredient()} 并且由于某种原因导致 id 返回未定义。

感谢您的帮助！

Answer 3

{this.props.ingredientList.map(ingredient => {

          return (
            <li key={ingredient.id}>
                <span>{ingredient.amount}</span>
                <span>{ingredient.ingredient}</span>
                <span ><button type='button' className='btn btn-danger' 
                onClick={ () => this.props.removeIngredient(ingredient.id) }>X</button></span>
            </li>
          )
        })}