代码之家 › 专栏 › 技术社区 › Thuan Nguyen

句柄选择时的反应日期选择器选择对象范围

react-datepicker reactjs javascript

0

Thuan Nguyen · 技术社区 · 7 年前

我在用 react-datepicker 建立我的申请。

请遵循我的源代码: https://codesandbox.io/s/xr76olj70o

我想拿个东西 startDate 和 endDate 当我选择这样一个特定的日子时: {startDate: "24-07-2018", endDate: "31-07-2018"}

我的 handleSelected 功能如下:

  handleRangeSelected = () => {
    const { startDate, endDate } = this.state;
    const range = {
      startDate: moment(startDate).format("DD-MM-YYYY"),
      endDate: moment(endDate).format("DD-MM-YYYY"),
    }
    console.log('Range selected!', range);
  }

我的问题是当我选择一天。第一次, state 当我选择一天的时候,似乎不是最新的。

结果:

First time: I chose 31/07/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "24-07-2018"}


Second time: I chose 01/08/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "31-07-2018"}

我这里怎么了?需要你的帮助!谢谢。

3 回复 | 直到 7 年前

1

0

Avinash 7 年前

react setstate是异步的,因此您将面临这样的问题, setState将回调作为其第二个参数,您可以在该回调中调用handlerangeselected函数

你可以查一下 https://codesandbox.io/s/011x911nyl 我刚刚在回调中记录了“state updated”,只需将其更改为call handlerangeselected

2

0

fsl 7 年前

您的状态似乎正在正确更新,但请记住 setState 是异步的,所以当你 console.log 在你的内心 handleRangeSelected , 状态尚未更新。

如果要在更新后立即记录它,可以将回调传递给 设置状态 里面 handleChange :

handleChange = ({ startDate, endDate }) => {
  startDate = startDate || this.state.startDate;
  endDate = endDate || this.state.endDate;
  if (startDate.isAfter(endDate)) {
    endDate = startDate;
  }
  // Pass callback to log selected range
  this.setState({ startDate, endDate }, () => {
    const range = {
      startDate: moment(this.state.startDate).format("DD-MM-YYYY"),
      endDate: moment(this.state.endDate).format("DD-MM-YYYY")
    };
    console.log("Range selected!", range);
  });
};

3

0

Jayffe 7 年前

你在打电话 onChange 和 onSelect 在你的约会对象中。它们都同时触发,因此设置新状态的一个被触发,另一个使用旧状态值。我把你的密码改成了 handleRangeSelected 在中的setstate回调中 handleChange

this.setState({ startDate, endDate }, this.handleRangeSelected);