Question

我使用Material-UI来创建DateTime选择器。 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
  });
};

Answer 1

我将状态值作为默认值添加到plannedDep。 value={this.state.plannedDep}
我通过以下方式更改了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,
  }}
 />

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

您要重写传递给该方法内部方法name的{{1}}参数，以进行handleChange，因此，当您在末尾重新设置状态时：

const name = target.name;

您没有设置预期的this.setState({ [name]: event.target.value })。

您可以通过两种方式对其进行修复：

1）直接通过以下方式设置状态：

plannedDep

2）在您的this.setState({ plannedDep: event.target.value })中添加一个name属性，以使TextField将成为触发事件的TextField的name属性的值：

target.name

working demo

Answer 3

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

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

3 个答案: