Я относительно новичок в React и создаю стиль ToDoList Приложение рецептов . Пользователь должен иметь возможность добавлять новые рецепты в список, а также удалять или редактировать существующие рецепты.
Я столкнулся с проблемой, заставляющей ингредиенты отображаться в отдельных строках, и задал этот вопрос о том, как это сделать. В результате я добавил в свой контейнер вторую функцию .map, чтобы перебирать ингредиенты и отображать каждую из них как новый элемент абзаца. Вот мой контейнер, Item.js:
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
const Item = (props) => (
<div>
<div className="Recipe-Item-Container" key={props.text}>
{/* Iterates through recipe item names and displays them */}
{props.items.map((item, index) => {
return (
<div className="Recipe-Item" key={index}>
<h3>{item}</h3>
// This is what I added
{/* Iterates through recipe ingriedients and displays them*/}
<p className="ingredients-list">
{props.ingredients[index].map((ingredient, ingredientIndex) => {
return (
<div className="ingredient" key={ingredient}>
{ingredient}
</div>
)
})}
</p>
<div className="buttons-container">
<Button className="edit-button" onClick={() => props.edit(item, index)}>Edit</Button>
<Button className="delete-button" onClick={() => props.delete(item, index)}>Delete</Button>
</div>
</div>
);
}
)}
</div>
</div>
)
export default Item;
Теперь начальные рецепты в моем состоянии правильно отображают ингредиенты в новых строках, а любой элемент рецепта, который редактирует пользователь, также отображает ингредиенты в новой строке. Именно то, что я хотел.
Проблема в том, что когда пользователь добавляет новый рецепт, ингредиенты не отображаются в новых строках так, как я хочу. Если вы нажмете кнопку «Добавить новый рецепт» и добавите новый, ингредиенты будут отображаться рядом и как один элемент абзаца.
У меня есть две функции, которые обрабатывают добавление нового рецепта и редактирование существующего рецепта, onSubmit и onEditSubmit. onEditSubmit работает нормально, потому что при редактировании рецептов ингредиенты отображаются правильно в отдельных строках. onSubmit это проблема. Как я могу изменить onSubmit и заставить его отображать ингредиенты в новых строках и в виде отдельных абзацев? Я думаю, что это проблема того, как я устанавливаю состояние в onSubmit, и может включать использование оператора распространения.
Вот мой App.js:
import React, { Component } from 'react';
import Item from './Item';
import './App.css';
import ModalComponent from './Modal.js';
import Button from 'react-bootstrap/lib/Button';
import EditModalComponent from './EditModal.js';
import SimpleStorage from "react-simple-storage";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
items: ["Pumpkin Pie", "Spaghetti", "Onion Pie"],
ingredients:[
["Pumpkin Puree ", "Sweetened Condensed Milk ", "Eggs ", "Pumpkin Pie Spice ", "Pie Crust "],
["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
["Onion ", "Pie Crust "]
],
// Recipe name and ingredients
inputVal: '',
ingredientVal: '',
// Recipe name and ingredients when user is editing existing recipe
inputValEdit: '',
ingredientValEdit: '',
// Controls whether forms are displayed or hidden
showRecipeForm: false,
showRecipeEditForm: false,
// Index to select which recipe item is being edited
editingIndex: ''
};
}
// Get text user inputs for recipes
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
};
// When user submits recipe this adds it to the list
onSubmit = (event) => {
event.preventDefault();
this.setState({
items: [...this.state.items, this.state.inputVal],
ingredients: [...this.state.ingredients, [this.state.ingredientVal]],
showRecipeForm: false
});
}
// When user edits existing recipe this adds it to the list
onEditSubmit = (event) => {
event.preventDefault();
const {items, ingredients, inputValEdit, ingredientValEdit, editingIndex} = this.state;
// Selects proper recipe item to edit
items[editingIndex] = inputValEdit;
ingredients[editingIndex] = ingredientValEdit.split(',');
this.setState({
items: items,
ingredients: ingredients,
inputVal: '',
ingredientVal: '',
showRecipeEditForm: false
});
}
closeRecipeForm = () => {
this.setState({
showRecipeForm: false,
showRecipeEditForm: false
});
}
// Shows recipe
AddRecipe = (bool) => {
this.setState({
showRecipeForm: bool
});
}
// Is called when one of the edit recipe buttons is clicked, shows RecipeEditForm
edit = (item, index) => {
this.setState({
showRecipeEditForm: !this.state.showRecipeEditForm,
editingIndex: index
});
}
// Deletes recipe item from the list
delete = (item, index) => {
this.setState({
ingredients : this.state.ingredients.filter((_, i) => i !== index),
items: this.state.items.filter((_, i) => i !== index)
});
}
render() {
return (
<div className="container">
{/* Handles storing data in local sessions via react-simple-storage*/}
<SimpleStorage parent={this} />
<h1>Recipe List</h1>
<ModalComponent
inputVal={this.state.inputVal}
handleChange={this.handleChange}
ingredientVal={this.state.ingredientVal}
onSubmit={this.onSubmit}
addRecipe={this.addRecipe}
showRecipeForm={this.state.showRecipeForm}
closeRecipeForm={this.closeRecipeForm}
/>
<EditModalComponent
inputValEdit={this.state.inputValEdit}
handleChange={this.handleChange}
ingredientValEdit={this.state.ingredientValEdit}
onEditSubmit={this.onEditSubmit}
closeRecipeForm={this.closeRecipeForm}
addRecipe={this.addRecipe}
showRecipeEditForm={this.state.showRecipeEditForm}
/>
<Item
items={this.state.items}
ingredients={this.state.ingredients}
edit={this.edit}
delete={this.delete}
/>
<Button className="add-recipe-button" onClick={this.AddRecipe}>Add New Recipe</Button>
</div>
);
}
}
Нужно ли сделать onSubmit более похожим на onEditSubmit? Если да, то как я могу это сделать?