@Blueprint 日期输入不起作用

Question

我正在尝试使用蓝图 DateInput 组件，并且我已经完全按照文档进行操作，但我就是无法让它工作。如果您有时间，我将不胜感激！

这是我的代码：

import React from 'react';
import * as moment from 'moment';
import { DateInput } from '@blueprintjs/datetime';

class SupplierPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      closeOnSelection: true,
      date: null,
      disabled: false,
      format: FORMATS[0],
      reverseMonthAndYearMenus: false,
      timePrecision: undefined,
    };
  }

  render() {
    const { date, format, ...spreadProps } = this.state;
    return (
      <div>
        <DateInput
          {...spreadProps}
          {...format}
          defaultValue={new Date()}
          className="foofoofoo"
          popoverProps={{ popoverClassName: 'barbarbar', content: 'hi' }}
          inputProps={{ className: 'bazbazbaz' }}
        />
      </div>

);
  }
}

export const FORMATS = [
  {
    formatDate: (date) => (date == null ? '' : date.toLocaleDateString()),
    placeholder: 'JS Date',
    parseDate: (str) => new Date(Date.parse(str)),
  },
  momentFormatter('MM/DD/YYYY'),
  momentFormatter('YYYY-MM-DD'),
  momentFormatter('YYYY-MM-DD HH:mm:ss'),
];

function momentFormatter(format) {
  return {
    formatDate: (date) => moment(date).format(format),
    placeholder: `${format} (moment)`,
    parseDate: (str) => moment(str, format).toDate(),
  };
}

这是错误：

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Blueprint2.Overlay`.
    in Blueprint2.Overlay (created by Blueprint2.Popover)
    in span (created by Manager)
    in Manager (created by Blueprint2.Popover)
    in Blueprint2.Popover (created by Blueprint2.DateInput)
    in Blueprint2.DateInput (created by SupplierPage)
    in div (created by SupplierPage)
    in SupplierPage (created by Connect(SupplierPage))
    in Connect(SupplierPage) (created by withReducer(Connect(SupplierPage)))
    in withReducer(Connect(SupplierPage)) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App__AppWrapper)
    in App__AppWrapper (created by App)
    in App
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in IntlProvider (created by LanguageProvider)
    in LanguageProvider (created by Connect(LanguageProvider))
    in Connect(LanguageProvider)
    in Provider
printWarning @ warning.js:33
warning @ warning.js:57
createElement @ ReactElementValidator.js:190
(anonymous) @ overlay.js?fe9b:93
mapSingleChildIntoContext @ ReactChildren.js:105
traverseAllChildrenImpl @ traverseAllChildren.js:75
traverseAllChildren @ traverseAllChildren.js:170
mapIntoWithKeyPrefixInternal @ ReactChildren.js:125
mapChildren @ ReactChildren.js:147
Overlay.render @ overlay.js?fe9b:82
(anonymous) @ ReactCompositeComponent.js:793
measureLifeCyclePerf @ ReactCompositeComponent.js:73
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792
_renderValidatedComponent @ ReactCompositeComponent.js:819
_updateRenderedComponent @ ReactCompositeComponent.js:743
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
updateChildren @ ReactChildReconciler.js:107
_reconcilerUpdateChildren @ ReactMultiChild.js:204
_updateChildren @ ReactMultiChild.js:308
updateChildren @ ReactMultiChild.js:295
_updateDOMChildren @ ReactDOMComponent.js:944
updateComponent @ ReactDOMComponent.js:758
receiveComponent @ ReactDOMComponent.js:720
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
performUpdateIfNecessary @ ReactCompositeComponent.js:558
performUpdateIfNecessary @ ReactReconciler.js:154
runBatchedUpdates @ ReactUpdates.js:148
perform @ Transaction.js:141
perform @ Transaction.js:141
perform @ ReactUpdates.js:87
flushBatchedUpdates @ ReactUpdates.js:170
closeAll @ Transaction.js:207
perform @ Transaction.js:154
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TransitionGroup`.
    at invariant (invariant.js:42)
    at instantiateReactComponent (instantiateReactComponent.js:72)
    at Object.updateChildren (ReactChildReconciler.js:115)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:295)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:944)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:758)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:720)
    at Object.receiveComponent (ReactReconciler.js:122)

我是否遗漏了一些明显的东西？我已经浏览了网络上所有可用的资源，但没有运气:(

Answer 1

想通了，你需要 16 岁以上的反应才能让这个工作。