Установка состояния со значением компонентаact-dateTime - PullRequest
Новая
       26

Установка состояния со значением компонентаact-dateTime

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

пожалуйста, мне нужна помощь. Я использую компонентact-dateTime, и я просто пытаюсь получить значение этого компонента, как и любое другое поле в форме. Но я не могу получить значение выбранной даты, не говоря уже о сохранении ее в состоянии с другими атрибутами в других полях.

Вот мой код:

Компонент Datetime 

  <Datetime
    onChange={this.handleChange}
    value={startDate}
    timeFormat={true}
    name="startDate"
    inputProps={{ placeholder: "Start Date" }}
   />

обработчик событий 

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

второй обработчик onchange 

 handleSelectDate = event => {
    if (event.target.name === "startDate") {
      this.setState({ startDate: event.target.value});
    } else {
      this.setState({ endDate: event.target.value });
    }
  }```

The state object

 this.state= { startDate: '' }

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

Спасибо

1 Ответ

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

Он не работает как обычный input, чтобы получить его значение с помощью name

onChange : триггер обратного вызова при изменении даты. Обратный вызов получает выбранный моментный объект как единственный параметр, если дата на входе действительна. Если дата во входных данных недопустима, обратный вызов получает значение входных данных (строку). Документы

Попробуйте: 

class App extends React.Component {

  state = {
    startDate: ""
  }
  // You need to bind "this"
  handleChange = this.handleChange.bind(this)

  // Receives the selected "moment" object as only parameter
  handleChange(date) {
    this.setState({ startDate: date })
  }

  render() {
    return (
      <div>
        <Datetime
          value={this.state.startDate}
          onChange={this.handleChange}
          timeFormat={true}
          inputProps={{ placeholder: "Start Date" }}
        />
        <hr />
        Select date:{" "}
        {this.state.startDate ? this.state.startDate.toString() : "no selected date"}
      </div>
    )
  }
}

Проверьте это codeSandbox пример.

Хотя это работает, это устарела, и я рекомендую вам проверить средство выбора даты-времени или средство выбора даты-реакции

...