Я создаю приложение для рецептов, и у меня возникают проблемы с функцией удаления.
Как это работает, вы нажимаете кнопку «Добавить рецепт», и появляется модальное окно, которое позволяет заполнить некоторые поля ввода для новый рецепт. В этой форме находится поле ингредиента и кнопка «Добавить ингредиент». Вы нажимаете «Добавить» и ингредиент добавляется в список ингредиентов. Он ведет себя точно так же, как список задач, но он находится внутри компонента формы. Я также хочу иметь возможность удалить ингредиент.
Мои компоненты приложения структурированы следующим образом:
- 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» просто дает мне начальное состояние, которое является пустой строкой.
Любая помощь будет очень полезна, чтобы помочь мне понять, как это сделать. Заранее спасибо!