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+的反应才能让它发挥作用。

@Blueprint dateInput不能正常工作

1 个答案: