Question

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

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

非常感谢您的帮助。我是React的新手，我尝试了3个不同的Datepicker库，我慢慢疯了，因为似乎没有工作，或者我无法将其转换为Parent-Child结构。谢谢！

父：

 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
  />
}

Answer 1

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

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

Answer 2

这段代码片段适用于我，导入DateTime（大写字母T）

import DateTime from 'react-datetime'; 

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

结果是这种情况下的时间戳

React Datepicker输入状态没有变化？

2 个答案: