修改的反应日期选择器未显示值

Question

我正在使用React v.15。使用默认代码时，使用react-datepicker库会产生问题。我已经成功修改了代码，但是每当单击所选日期时，它根本不会显示任何日期。这是我的代码的样子：

import * as React from 'react';
let DatePicker = require('react-datepicker');
import 'react-datepicker/dist/react-datepicker.css';

export default class DtePicker extends React.Component<any, any> {
    constructor() {
        super()
        this.state = {
            startDate: new Date(),
        }
        this.handleChange = this.handleChange.bind(this)
    }

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

    render() {
        return (
            <div>
                <DatePicker
                    dateFormat='yyyy/MM/dd'
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

Am I missing a code perhaps in my handleChange function? Also, it's a typescript file, using ASP.Net framework.

Answer 1

尝试一下。运行正常

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

    class DtePicker extends React.Component {
      constructor() {
        super();
        this.state = {
          startDate: new Date()
        };
        this.handleChange = this.handleChange.bind(this);
      }

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

      render() {
        return (
          <div>
            <DatePicker
              dateFormat="yyyy/MM/dd"
              selected={this.state.startDate}
              onChange={this.handleChange}
            />
          </div>
        );
      }
    }

实时检查demo

Answer 2

指定版本后，我看到“ date.clone不是一个函数”错误，因此我怀疑moment存在问题。

[react-datepicker v0.40.0使用引擎盖下的力矩

issue 1120: DatePicker breaks with "date.clone is not a function" when "selected" date is passed down as a prop

所选日期必须是moment对象，因此我们将每个日期对象另存为moment日期对象。

class DtePicker extends Component {
  constructor(props) {
    super(props); // Don't forget to pass props to super constructor!
    this.state = {
      startDate: moment(new Date())
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: moment(date)
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          dateFormat="YYYY/MM/dd" // Also corrected date format
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

• 时刻v2.24.0
• react v15.4.1
• react-datepicker v0.40.0
• react-dom v15.4.1