Как получить значение из средства выбора даты React при каждом изменении даты? - PullRequest
Новая
       5

Как получить значение из средства выбора даты React при каждом изменении даты?

0 голосов
/ 17 января 2020

Я использую библиотеку React под названием response-date-picker, я хочу получать дату всякий раз, когда я ее изменяю.

Вот код по умолчанию, предоставленный библиотекой для выбора даты из выпадающего списка 

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;

Я пытаюсь сохранить значение в новом состоянии, называемом «новым», когда кто-то меняет даты, что вызывает onChange () и в конечном итоге сохранить его в «новом», затем я пытаюсь сделать console.log (this.state.new) каждый раз, когда кто-то меняет даты.

Я тоже пробовал несколько разных подходов, но не в состоянии понять это правильно. Любая помощь будет очень признательна.

Ответы [ 2 ]

1 голос
/ 17 января 2020

Звучит так, как будто вы хотите сохранить дату в состоянии, и если пользователь обновляет дату, чтобы сохранить ее в состоянии. Что вы хотите сделать, это что-то вроде этого: 

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 })
0 голосов
/ 17 января 2020

вместо

onChange = {this.onChange}

вы можете вызывать функцию при каждом изменении с помощью функции стрелки, чтобы вы могли передать ей значение цели события, например:

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

...