如何从React中的日期时间选择器获取值?

1. 我将状态值作为默认值添加到planneddep。 value={this.state.plannedDep}

2. 我改变了这种方式: onChange={(event) => this.handleChange("plannedDep", event)} . 按照你的密码, onChange={this.handleChange("plannedDep")} 一旦组件被安装,您所做的onchange将被激发,并且对于每个状态/属性的更改都会导致不必要的呈现。

<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,
  }}
 />

3. 我们必须在设置状态后检查该值,而不是在设置状态之前。我正在检查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.
  });
};

我希望这能解决你的问题。)

你超越了 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的name属性的值:

<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
  }}
/>

这里 working demo

我相信问题是你 onChange 处理程序。如果要将值传递到 换上 必须在回调中初始化它。 尝试更改您的 换上 到 onChange={() => this.handleChange("plannedDep")}