Question

import React from 'react';
import $ from "jquery";
import moment from "moment";
import DateRangePicker from "react-bootstrap-daterangepicker";

import dateRangePickerCss from '../../../../media/css/shared/daterangepicker.css'

const Filter = () => {

const openDropdown = (e) => {
    var parent = e.target.parentElement;
    $(parent).siblings().removeClass('open');
    $(parent).toggleClass('open');
};

const handleEvent = (event, picker) => {
    console.log(picker.startDate);
};

return (
         <DateRangePicker onEvent={handleEvent}>
                <a class="selected-txt">Filter by Date</a>
                </DateRangePicker>

)

}

export default Filter

日期选择器： https://github.com/skratchdot/react-bootstrap-daterangepicker

当我使用选择器时，它在控制台上给出了以下错误

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded

修改

这是我的package.json

  {
  "name": "a",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev_build": "webpack --display-modules --progress --colors --watch",
    "prod_build": "sh frt_build_script.sh"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.28.0",
    "eslint": "^3.15.0",
    "eslint-config-standard": "^7.1.0",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^6.10.0",
    "eslint-plugin-standard": "^2.1.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "webpack": "^2.2.1"
  },
  "peerDependencies": {
    "react": "^15.4.2"    
  },
  "dependencies": {
    "axios": "^0.12.0",
    "jquery": "^3.2.1",
    "react-dom": "^15.4.2",
    "react-modal": "^1.7.3",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.8.2",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0"
  }
}

Answer 1

我认为你使用datepicker的原因是因为你希望用户只允许在指定的开始日期到结束日期之间选择日期。我对吗？如果我是，那么你可以通过提供输入类型日期来完成它。如果是原因，请告诉我。将使用解决方案更新答案。：）

react-bootstrap-daterangepicker无效

1 个答案: