React-DatePicker

Question

我尝试实现 React Datepicker 函数编号 32 https://reactdatepicker.com/。

这是他们提供的文档代码

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

toggleCalendar (e) {
  e && e.preventDefault()
  this.setState({isOpen: !this.state.isOpen})
}

<div>
    <button
        className="example-custom-input"
        onClick={this.toggleCalendar}
        {format(this.state.startDate, "dd-MM-yyyy")}
    </button>
    {
        this.state.isOpen && (
            <DatePicker
                selected={this.state.startDate}
                onChange={this.handleChange}
                withPortal
                inline />
        )
    }
</div>

我的问题是，“格式未定义”错误被抛出。我在这里犯了什么错误？
请帮助。

Answer 1

基于他们 github 存储库中的示例： https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/inline_portal.jsx

您缺少函数格式，它看起来与库 "date-fns/format" 中的格式相似。您也可以从 npm 获得。

在您的控制台中与项目相同的文件夹中执行 npm install date-fns --save 并将此行 import format from "date-fns/format"; 添加到您的代码中

我会看看这是否是您想要使用的格式函数，或者根据您的需要编写您自己的格式函数。

这是我的沙箱：https://codesandbox.io/s/react-datepicker-75ou7

React-DatePicker - 格式未定义

React-DatePicker - Format not Defined

reactjs