Я относительно новичок в Javascript и React и пытаюсь собрать страницу для записи праздничных дат. У меня он работает с помощью response-day-picker, отображающего календарь для выбора дат, а затем условно отображающего дочерний компонент, когда у меня есть диапазон дат со следующим:
{from &&
to && (
<DaysSelected range = {{ from, to }} setDays = {this.holidayDays} />
)}
Мой дочерний компонент принимает даты от и до, определяет, сколько дней охватывает диапазон, и отображает соответствующий текст.
Это здорово. Но я бы хотел, чтобы это было сделано, и я не могу этого сделать, - это передать это количество дней родительскому компоненту после того, как он с этим справится.
Что ж, я могу, но мне нужно сделать это с помощью onClick, прикрепленного к кнопке, как показано ниже:
render() {
const { from, to } = this.props.range;
const numDays = this.weekDaysOnly(from, to);
return (
<div>
<p>
Your selected holiday dates covers from: {format(from, "DD/MM/YYYY")}{" "}
to {format(to, "DD/MM/YYYY")}.
</p>
<p>this is {numDays} days in length.</p>
<br />
<button onClick = {() => this.props.setDays(numDays)}>
Confirm Dates
</button>
</div>
);
}
Что я бы хотел, так это передать его обратно, как только он с этим справится, но все способы, которые я пытался заставить это сделать, приводили к ошибкам из-за состояния бесконечного цикла (я предполагаю, потому что setState запускает повторный рендеринг, который затем запускает мой код, чтобы снова отработать дни, что запускает setState и так далее ...)
Я уверен, что мой новичок мешает мне увидеть очевидное решение, и буду признателен любому, кто может указать мне правильное направление?
Что такое DaysSelected
? Кажется, это не часть сборщика ответов
@LucaFabbri - DaysSelected - мой дочерний компонент, который определяет дни и отображает результаты. Он содержит второй блок кода выше.
@Tholle - Весь код для расчета количества дней находится в дочернем компоненте, поэтому перемещение его к родительскому означало бы полностью удалить дочерний элемент, и я пытался придерживаться принципов компонентности и сохранять простоту моего основного родительского элемента - поэтому он просто отображает или нет дочерний элемент, если есть начало и конец диапазона дат, а затем ребенок выполняет работу и отображает результаты.
@MarkB Да, держать вещи инкапсулированными - это здорово, но попытка передать данные от дочернего компонента к родительскому идет вразрез с нисходящим потоком данных React.
@Tholle, но это стандартный шаблон, который задокументирован на самом сайте React и может быть успешно реализован с использованием шаблона обратного вызова, который я реализовал с помощью вызова onClick, прикрепленного к моей кнопке, поэтому я не пытаюсь сделать что-то странное или неподдерживаемое, я Я просто хотел бы знать, как я могу запустить этот обратный вызов, не нажимая кнопку.
«Но я бы хотел, чтобы это было сделано, и я не могу заставить это сделать, - это передать это количество дней родительскому компоненту после того, как он с этим справится». Скорее всего, вы захотите вместо этого вычислить
numDays
в родительском компоненте и передать его в качестве свойств.