时间戳

首页 > 解决方案 > 如何从 React 中的 DateTime 选择器获取值？

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

问题描述

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

标签： javascriptreactjsmaterial-ui

解决方案

  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,
  }}
 />
  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.
  });
};

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

推荐阅读