Question

我对Javascript和React还是比较陌生，并试图将一个页面放在一起以记录假期日期。我让它与react-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并不断地……）

我确定我的新手使我无法看到明显的解决方案，并希望有人能指出正确的方向吗？

当子元素中的元素更新时反应setState

0 个答案: