如何從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")}