Существует несколько вариантов кода, которые удерживают ваше приложение от динамического.
Во-первых, вам нужно использовать container component, который обрабатывает все, что связано с состоянием Seance.Это включает в себя adding, removing и viewing.Все это должно быть обработано родителем, который обновляет свои дочерние элементы в соответствии с текущим значением в state.Пожалуйста, следуйте этому руководству, чтобы понять, контейнеры и компоненты .
Во-вторых, вам необходимо изменить способ использования Seances.Они должны храниться как array в пределах родительского state.Как он у вас есть, он жестко запрограммирован с 4 <Seances />, который не может быть удален / обновлен.
Вместо этого вы должны создать array из object s, как в state:
seances: [
{ id: "1", startDate: "2019-04-10 10:28:05.926-07", endDate: "2019-05-10 10:28:05.924-07" },
{ id: "2", startDate: "2019-04-11 11:28:05.926-07", endDate: "2019-05-11 11:28:05.924-07" },
{ id: "3", startDate: "2019-04-12 12:28:05.926-07", endDate: "2019-05-12 12:28:05.924-07" },
...etc
];
Вы будете использовать Array.map для отображения этих сеансов array и неявно return этих сеансов динамически (чтобы упроститьчитай, я пишу твой <Seance id={id} /> встроенный компонент):
<div>
{seances.map(({ id, startDate, endDate }) => (
<div key={id}>
<h1>Seance nr: {id} </h1>
<p>Start date: {startDate}</p>
<p>End date: {endDate}</p>
<button type="button" onClick={() => handleDeleteSeance(id)}>X</button>
</div>
))}
</div>
Теперь ты удалишь эти элементы из массива seances, используя Array.filter для сеансаid собственность.Когда пользователь нажимает кнопку «X», он вызывает this.handleDeleteSeance с определенным сеансом id:
handleDeleteSeance = id => {
this.setState(prevState => ({
...prevState, // spread out any previous state not related to "seances"
seances: prevState.seances.filter(seance => seance.id !== id) // this translates to: compare each "seance" within "seances" and implicitly return any that do NOT match the "id" that was clicked
})
};
Чтобы добавить элемент в массив seances, вы будете использовать оператор распространения и добавьте object со свойствами, которые были собраны из form:
handleSubmit = e => {
e.preventDefault();
const { id, startDate, endDate } = this.state;
if (!id || !startDate || !endDate } return null; // if any properties are missing, don't add an item yet
this.setState(prevState => ({
...prevState, // spread out any previous state not related to "seances"
seances: [...prevState.seances, { id, startDate, endDate } ] // this translates to: spread out any previous seances and add a new object with "id", "startDate" and "endDate"
});
}
Пример работы с массивами (поскольку это клиент-только в реализации, я решил фильтровать по позиции массива, чтобы мне не приходилось иметь дело с генерацией уникальных id с, однако вы можете использовать uuid для генерации этих динамических id с, еслиВы хотите):
Другие примечания :
- Один из ваших компонентовсодержит
let modalClose = () =>
this.setState({ modalShow: false }); в методе render.Это недопустимо и должно быть определено как метод класса. - Структурируйте ваши компоненты для повторного использования.У вас есть некоторые компоненты, которые есть, но затем у вас есть некоторые, которые находятся в другом компоненте (например,
FileInput).По мере роста вашего приложения вам может понадобиться использовать FileInput в другом месте для другой формы. - Использовать синтаксис ES6 во всем вашего проекта, чтобы упростить ваш код.Например, вы можете деконструировать
props для вашего Login компонента следующим образом: const Login = ({ submitLogin }) => ( <MDBRow>...etc</MDBRow>);.