javascript - 将 react-datepicker 与 redux-form 结合使用

Question

我正在尝试将 react-datepicker 与 redux-form 一起使用，但我遇到了一个问题。当我从日期选择器中选择一个日期时，出现以下错误:

Uncaught TypeError: t.isSame is not a function

我的代码如下:

// My component that uses the date picker
const renderDateField = (field) => {
  return (
    <div>
      <img src={require('./images/date.png')} className={styles.iconField} />
      <DatePicker {...field.input} placeholderText={field.placeholder} onChange={field.onDateChange} dateFormat='DD/MM/YYYY' selected={field.selected ? field.selected : null} className={styles.inputField} />
    </div>
  );
};

export class MyComponent extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (date) {
    console.log('handle Change', date);
    this.setState({
      startDate: date.format('DD/MM/YYYY')
    });
  }

  render () {
    const { handleSubmit } = this.props;
    console.log('Render global state.startDate', this.state.startDate);
    return (
      <div>
        <form onSubmit={handleSubmit(this.props.filterSubmit)} method='post' action='/tennis/search'>
                ...
                <Field name='date' placeholder='Quand ?' component={renderDateField} onDateChange={this.handleChange} selected={this.state.startDate} />
                ...
        </form>
      </div>)
    ;
  }
}
...
TennisSearchFilters.propTypes = {
  filters: React.PropTypes.shape({
    date: React.PropTypes.object
  }),
  filterSubmit: React.PropTypes.func.isRequired,
  handleSubmit: propTypes.handleSubmit
};
    ...
export default reduxForm({
          form: 'tennisSearch',
          validate: validateTennisSearchForm
        })(TennisSearchFilters);

我认为存在格式错误，因为输入值似乎已更新为字符串，然后在将时刻与字符串进行比较时崩溃。但我不太确定......因此我请求你的帮助:)

我检查了其他人的帖子和问题，但它没有正常工作(但也许我做错了什么)。

非常感谢您的帮助!

Answer 1

查看提供的代码示例，我假设 react-datepicker 正在使用 moment。

onChange 方法接收 moment 实例，您正在将此实例转换为纯字符串。然后，react-datepicker 尝试对字符串值调用 isSame 方法，这当然会失败。

不是将更新的值转换为字符串，而是按接收到的那样存储。

this.setState({
    startDate: date,
});