如何从 Material Ui 中获取 Date Picker 的值答案

【问题标题】：How to get value of Date Picker from Material Ui如何从 Material Ui 中获取 Date Picker 的值
【发布时间】：2016-01-06 00:23:29
【问题描述】：

如果我用 Material Ui 创建了一个日期选择器，我如何获取用户的输入值？

假设用户选择 01.01.2016-> 我如何获取该值并将其存储为数据类型为 date 的变量？

到目前为止，我尝试做的是使用状态来传回 JSON 对象，但这似乎不起作用。例如：

getInitialState: function() {
    return {
      startDate: null,
      endDate:null    
    };
  },

render: function() {
return (
      <div>
          <DatePicker hintText="Start Date" value={this.state.startDate}  onChange={this._handleStartInput} />
          <DatePicker hintText="End Date" value={this.state.endDate} onChange={this._handleEndInput} />
      </div>
);},

_handleStartInput: function(value) {
    this.setState({
      startDate: value
    });
  },

  _handleEndInput: function(value) {
    this.setState({
      endDate: value
    });
  },

然后我可以从那里创建另一个提取值的函数，但是现在在我选择一个日期之后，状态永远不会改变并显示在 UI 中。

【问题讨论】：

value 在_handleStartInput 和_handleEndInput 中看起来像什么？我认为值是一个事件，所以你可以试试value.target.value
@Road 现在当我记录它们时，它们为空。我试过 value.target.value 它仍然返回 null
您的DatePicker 组件是定制的还是来自使用Material UI 作为设计的库？你的DatePicker 是什么样的？
No DatePicker 是材质 UI 库中的组件。这是它的文档：material-ui.com/#/components/date-picker
尝试绑定this 例如this._handleStartInput.bind(this)。文档使用 facebook.github.io/react/blog/2015/01/27/… 类的自动绑定功能

标签： javascript jquery reactjs material-ui

【解决方案1】：

我试过了，我画了控制台值

<DatePicker  container="inline" floatingLabelText="Fecha desde" onChange={(x, event) => this.setFechaDesde(x,event)}    defaultDate={new Date()} />

和

setFechaDesde(x,event){
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(x));
    }

【讨论】：

【解决方案2】：

您使用的是哪个版本的 Material-UI？

通过阅读文档，您会看到

onChange 日期值更改时触发的回调函数。由于没有与更改关联的特定事件，第一个参数将始终为 null，第二个参数将是新的 Date 实例。

您应该尝试在回调中添加第二个参数。

【讨论】：

<DatePicker name="startDate" autoOk={true} floatingLabelText="startDate" onChange={(x, event) => {console.log(arguments);}} /> 在控制台上总是可以看到空数组，“material-ui”：“0.15.0”

【解决方案3】：

您的 onChange 处理程序函数应采用两个参数：事件和日期，其中事件始终为空，日期是新的日期对象。

_handleStartInput: function(event, date) {
    var currentState = this.state;
    currentState.startDate = date;
    this.setState(currentState);
},

_handleEndInput: function(event, date) {
    var currentState = this.state;
    currentState.endDate = date;
    this.setState(currentState);
}

【讨论】：