每当我更改日期时，如何从 React 日期选择器中获取价值？

Question

我正在使用一个名为 react-date-picker 的 React 库，我想在更改日期时获取日期。

这是库提供的默认代码，用于从下拉列表中选择日期

import React, { Component } from "react";
import DatePicker from "react-date-picker";

class MyApp extends Component {
  state = {
    date: new Date(),

  };

  onChange = date => {
    this.setState({ date });

  };

  render() {
    return (
      <div>
        <DatePicker onChange={this.onChange} value={this.state.date} />

      </div>
    );
  }
}

export default MyApp;

我试图做的事情：

import React, { Component } from "react";
import DatePicker from "react-date-picker";

class MyApp extends Component {
  state = {
    date: new Date(),
    new: ""
  };

  onChange = date => {
    this.setState({ date });
    console.log("changed");
    this.setState({ new: this.state.date });
  };

  render() {
    return (
      <div>
        <DatePicker onChange={this.onChange} value={this.state.date} />
        {console.log(this.state.new)}
      </div>
    );
  }
}

export default MyApp;

每当有人更改日期时，我都试图将一个值存储到一个名为“new”的新状态中，这将触发 onChange() 并最终将其存储到“new”中，然后我正在尝试执行 console.log(this. state.new) 用于每次有人更改日期。

我也尝试了几种不同的方法，但没有做对。 任何帮助将非常感激。

Answer 1

听起来您想将日期保持在状态，并且如果用户更新日期以将其存储在状态中。 你想要做的是这样的：

onChange = date => {
  // update date and set new to null since first selection
  if ( !this.state.date && !this.state.new ){
   this.setState({ date, new: null })
  // update 'new' date but keep old date in state
  } else if (this.state.date && !this.state.new) {
   this.setState({ new: date})
  // move old new date to date and set newest selection to new
  } else { 
   this.setState({ date: this.state.new, new: date})
  }
};

附带说明一下，setState 是异步的，因此不建议像您那样连续调用它两次。 如果要确保 setState 在再次设置状态之前已完成状态更新，则应使用 setState 的第二个参数，它是一个回调函数，例如：

this.setState({ property: valye }, () => this.setState({ another_property: value })

Answer 2

代替

onChange={this.onChange}

您可以使用箭头函数在每次更改时调用该函数，以便您可以将事件目标的值传递给它，如下所示

onChange={e => this.onChange(e.target.value)}