React Datepicker输入状态没有改变？答案

【问题标题】：React Datepicker input state not changing?React Datepicker输入状态没有改变？
【发布时间】：2018-01-09 10:14:09
【问题描述】：

我有一个带有子表单组件的多步骤表单。在其中一个组件上，我正在尝试实现YouCanBookMe DatePicker。

现在，当我尝试像使用其他常规文本输入一样更新 datepicker 值的状态时，状态不会更新。如果我输入日期，状态会更新，但当我从选择器中实际选择日期时不会更新。我真的不知道为什么。你们中的任何人都可以指出为什么没有吗？

非常感谢您的帮助。我是 React 的新手，我已经尝试了 3 个不同的 Datepicker 库，但我正在慢慢发疯，因为似乎没有一个有效，或者我无法将其转换为父子结构。谢谢！

家长：

 constructor(props) {
    super(props);

    this.state = {
      wants_interview_date: moment().format("DD-MM-YYYY")
	  }
  }
  
 handleChange(field) {
    return (evt) => this.setState({ [field]: evt.target.value });
 }
 
 render(){
    return <FormStep8
        wants_interview_date={this.state.wants_interview_date}
        onDateChange={this.handleChange('wants_interview_date')} />;
 }

子组件：

render() {
  <Datetime
    timeFormat={false}
    dateFormat="DD-MM-YYYY"
    inputProps={{id: 'wants_interview_date', onBlur: this.props.onDateChange, value: this.props.wants_interview_date}} //To get the regular HTML input props
  />
}

【问题讨论】：

你从哪里得到evt？
@MuratK。我不。我不完全理解 StateChange 方法，但它适用于普通文本输入。我是从this tutorial 那里得到的

标签： reactjs datepicker react-datetime

【解决方案1】：

这段代码 sn-p 对我来说很好，导入 DateTime（大写 T）

import DateTime from 'react-datetime'; 

<DateTime name="newapp_time" 
onChange={(e) => { this.setState({ newapp_time: moment(e).toJSON() }) }} />

在这种情况下，结果是一个时间戳

【讨论】：

如果使用 props 更新 state 会起作用吗？因为这是我当前的问题
你的意思是，用道具设置初始状态？
您说，如果您从picker中选择日期，那么状态不工作，对吧？如果是这样，我的解决方案会奏效。我还遇到了日期时间包的问题。但这对我来说很好用。请尝试一下并告诉我。 :)
我正在尝试从子组件设置状态。状态在父组件上设置。并且状态没有被更新。那是我的问题
对不起，我无法完全理解你的代码，因为有错误，比如 (changes here)=> 1.this.handleChange.bind(this,'wants_interview_date')

【解决方案2】：

Reactiflux的好朋友帮我解决了这个问题。显然Moment.js 在handleChange 上返回了一个对象，因此状态没有显示任何内容。输出需要使用_d Moment.js 方法。这是正确的handleChange 方法：

handleDateChange(field) {
    return evt => {
      const value = evt._d;
      this.setState({ wants_interview_date: value });
    };
  }

【讨论】：