1

我有一个带有子表单组件的多步骤表单。在其中一个组件上，我正在尝试实现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
  />
}

4

2 回答 2

2

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

handleDateChange(field) {
    return evt => {
      const value = evt._d;
      this.setState({ wants_interview_date: value });
    };
  }
于 2017-08-03T07:06:45.877 回答
0

这个代码片段对我来说很好，导入 DateTime（大写 T）

import DateTime from 'react-datetime'; 

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

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

于 2017-08-02T10:08:29.773 回答