如何通過刪除 function 作為 ReactJS 中的道具

Question

我正在構建一個食譜應用程序，但在刪除 function 時遇到問題。

它的工作原理是單擊“添加配方”按鈕，然后彈出一個模式，讓您填寫一些新配方的輸入字段。 在該表單中是一個成分字段和一個“添加成分”按鈕。 您單擊“添加”，該成分將添加到成分列表中。 它的行為與待辦事項列表完全相同，但它位於表單組件內部。 我還希望能夠去除一種成分。

我的應用程序組件的結構如下：

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

這是位於父組件中的表單組件：

<RecipeCardForm
handleRemoveIngredients={this.handleRemoveIngredients}
/>

父組件中還有removeIngredient function：

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

在子組件中，這在顯示成分列表的<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>
              )
            })}

由於它的結構，我無法弄清楚如何在父組件中刪除道具的刪除 function 中傳遞通常 go 的 id。

通常，我會做這樣的事情：

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

但是由於父組件中沒有映射任何內容，因此我無法傳遞 id。

因此，當我在removeIngredient function 中記錄 id 時，它顯示為未定義。 我知道它在那里。 當我在添加 function 中記錄它時，有一個 id，當我在映射子組件中的每個成分時記錄它時，它也在那里。 我什至可以在刪除成分按鈕的 onClick 中訪問它：

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

這也給了我id。

我只是想不通如何在不映射父組件的情況下傳遞它，但父組件中的 map 實際上沒有任何內容。 當然，傳遞“this.state.id”只會給我一個空字符串的初始 state。

任何幫助將不勝感激，以幫助我了解如何做到這一點。 提前致謝！

Answer 1

我認為解決您的問題的方法是將 ID 傳遞給this.props.handleRemoveIngredient function，如下所示：

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

在您的示例中，您沒有將 function 交給成分 ID，而是調用了this.props.removeIngredient function，這不是道具/ ZC1C425268E68385D1AB4Z144F 的正確名稱。

Answer 2

沒關系，剛剛想通了。

解決方案確實是onClick={ () => this.props.removeIngredient(ingredient.id) }

我的問題是當我將道具傳遞給子組件handleRemoveIngredient={this.handleRemoveIngredient}我將它作為 function 傳遞，沒有 arguments 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>
          )
        })}