Как передать функцию удаления в качестве реквизита в ReactJS - PullRequest
0 голосов
/ 25 апреля 2020

Я создаю приложение для рецептов, и у меня возникают проблемы с функцией удаления.

Как это работает, вы нажимаете кнопку «Добавить рецепт», и появляется модальное окно, которое позволяет заполнить некоторые поля ввода для новый рецепт. В этой форме находится поле ингредиента и кнопка «Добавить ингредиент». Вы нажимаете «Добавить» и ингредиент добавляется в список ингредиентов. Он ведет себя точно так же, как список задач, но он находится внутри компонента формы. Я также хочу иметь возможность удалить ингредиент.

Мои компоненты приложения структурированы следующим образом:

  • RecipeBook. js (родительский)
  • RecipeCardForm. js (дочерний)

Этот компонент формы находится в родительском компоненте:

<RecipeCardForm
handleRemoveIngredients={this.handleRemoveIngredients}
/>

Также в родительском компонент - это функция removeIngredient:

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

В компоненте child он возвращается внутри <ul>, который отображает ингредиентList:

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

Из-за того, как он структурирован, я не могу понять, как передать идентификатор, который обычно go в функции удаления пропеллера удаления в родительском компоненте.

Обычно я делал бы что-то подобное :

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

Но поскольку в родительском компоненте ничего не отображается, я не могу передать идентификатор.

Из-за этого, когда я регистрирую идентификатор в removeIngredient функция, она появляется как неопределенная. Я знаю его там, хотя Когда я регистрирую это в функции добавления, есть идентификатор, и когда я регистрирую это, поскольку я сопоставляю каждый компонент в дочернем компоненте, это также там. Я даже могу получить к нему доступ в onClick кнопки удаления ингредиента:

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

Это также дает мне идентификатор.

Я просто не могу понять, как передать его без сопоставления в родительский компонент, но буквально ничего не отображается в родительском компоненте. И, конечно, передача «this.state.id» просто дает мне начальное состояние, которое является пустой строкой.

Любая помощь будет очень полезна, чтобы помочь мне понять, как это сделать. Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Я думаю, что решением вашей проблемы было бы передать идентификатор функции this.props.handleRemoveIngredient следующим образом:

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

В вашем Например, вы не передали функцию идентификатор ингредиента и вызвали функцию this.props.removeIngredient , которая не является правильным именем проп / функции.

0 голосов
/ 26 апреля 2020

Неважно, просто понял.

Решение было действительно onClick={ () => this.props.removeIngredient(ingredient.id) }

Моя проблема была, когда я передавал реквизиты дочернему компоненту handleRemoveIngredient={this.handleRemoveIngredient} Я передавал его как функция без аргументов handleRemoveIngredient={() => this.handleRemoveIngredient()} и по какой-то причине она возвращала идентификатор неопределенным.

Спасибо за помощь !!

0 голосов
/ 25 апреля 2020
{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>
          )
        })}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...