如何从React中的DateTime选择器获取值？

Question

我使用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
  });
};

Answer 1

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

2. 我以这种方式更改了onChange： 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.
  });
};

我希望这可以解决您的问题:)

Answer 2

您可以通过const name = target.name;覆盖传递给该方法内部方法handleChange的name参数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
  }}
/>

这是工作演示

Answer 3

我相信问题是您的onChange处理程序。 如果要将值传递给onChange ，则必须在回调中对其进行初始化。 尝试将onChange更改为onChange={() => this.handleChange("plannedDep")}