代码之家 › 专栏 › 技术社区 › ScalaBoy

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

material-ui reactjs javascript

ScalaBoy · 技术社区 · 6 年前

我使用Material UI来创建日期时间选择器。 Here 是我的演示代码。

我补充说 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 回复 | 直到 6 年前

Avanthika 6 年前

我将状态值作为默认值添加到planneddep。 value={this.state.plannedDep}
我改变了这种方式: 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,
  }}
 />

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

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

quirimmo 6 年前

你超越了 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