反應 - 引導 - daterangepicker不工作

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 反應 - 引導 - 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" 
    } 
}

來源

2017-04-19 vini

從'../../../../media/css/shared/daterangepicker.css'更改導入dateRangePickerCss以導入'../../../../media/css /shared/daterangepicker.css' – Ved

做了@Ved問題不在於此，雖然 – vini

檢查此：http://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have -refs-mean – Ved

我認爲你使用datepicker的原因是因爲你希望用戶只允許在指定的開始日期到結束日期之間選擇日期。我對嗎？如果我是，那麼你可以簡單地通過給予輸入類型日期來做到。如果是這個原因，讓我知道。將用解決方案更新答案。 :)

來源

2017-04-19 13:38:51

不是真正的組件不是領先自己。 – vini

是的，因爲您不能在DatePicker之間插入錨標記，所以必須先關閉DatePicker然後使用錨標記。 –

根據那裏的文檔，你可以添加https://github.com/skratchdot/react-bootstrap-daterangepicker – vini

反應 - 引導 - daterangepicker不工作

回答

相關問題