Как получить значение из палитры DateTime в React? - PullRequest
0 голосов
/ 14 января 2019

Я использую Material-UI для создания выбора DateTime. Здесь - мой демонстрационный код.

Я добавил console.log к функции handleChange, чтобы увидеть текущее выбранное значение. Однако значение не изменяется при использовании средства выбора DatTime:

handleChange = name => event => {
  const target = event.target;
  const name = target.name;
  console.log("plannedDep", this.state.plannedDep)
  this.setState({
      [name]: event.target.value
  });
};

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Я считаю, что проблема в вашем onChange обработчике. Если вы передаете значение в onChange, вы должны инициализировать его в обратном вызове. Попробуйте изменить onChange на onChange={() => this.handleChange("plannedDep")}

0 голосов
/ 14 января 2019
  1. Я добавил значение состояния в качестве значения по умолчанию для запланированного значения. value={this.state.plannedDep}

  2. Я изменил onChange следующим образом: onChange={(event) => this.handleChange("plannedDep", event)}. Судя по вашему коду, onChange={this.handleChange("plannedDep")} имеющийся у вас онжан будет запущен, как только компонент будет смонтирован, и за каждое изменение состояния / опоры, приводящее к ненужным визуализациям.

<TextField
  id="datetime-local"
  label="Next appointment"
  type="datetime-local"
  onChange={(event) => this.handleChange("plannedDep", event)}
  value={this.state.plannedDep}
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
 />
  1. Мы должны проверять значение после установки состояния, а не перед его установкой. Я делаю проверку в обратном вызове setState, и он показывает мне обновленное значение.
handleChange = (name, event) => {
  const target = event.target; // Do we need this?(unused in the function scope)!
  this.setState({
    [name]: event.target.value
  }, () => {
    console.log(this.state.plannedDep)
    // Prints the new value.
  });
};

Надеюсь, это решит вашу проблему:)

0 голосов
/ 14 января 2019

Вы переопределяете аргумент name, передаваемый методу handleChange внутри этого метода, делая const name = target.name;, поэтому, когда вы возвращаете состояние в конце:

this.setState({
  [name]: event.target.value
})

Вы не устанавливаете ожидаемый plannedDep.

Вы можете исправить это двумя способами:

1) Установите состояние напрямую через:

this.setState({
  plannedDep: event.target.value
})

2) Добавьте атрибут имени к вашему TextField, чтобы target.name был значением атрибута имени вашего TextField, который вызвал событие:

<TextField
  id="datetime-local"
  name="plannedDep" // see here!
  label="Next appointment"
  type="datetime-local"
  onChange={this.handleChange("plannedDep")}
  defaultValue="2017-05-24T10:30"
  className={classes.textField}
  InputLabelProps={{
    shrink: true
  }}
/>

Здесь рабочая демоверсия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...