我使用的是react16.13.1和react dates21.8.0。我面临DateRangePicker组件的问题(SingleDatePicker工作正常(
我使用它如下：
<DateRangePicker
// startDate={this.props.filters.startDate}
endDate={this.props.filters.endDate}
onDatesChange={this.onDatesChange}
focusedInput={this.state.focused}
endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
onFocusChange={this.onFocusChange}
showClearDates={true}
numberOfMonths={1}
isOutsideRange={() => false}
regular = {()=> true}
reopenPickerOnClearDates= {()=>true}
/>
以及完整的组件：
Filter.js
class ExpenseListFilters extends React.Component{
state = {
focused:null
}
onDatesChange = ({ startDate, endDate }) => {
this.props.dispatch(setStartDate(startDate));
this.props.dispatch(setEndDate(endDate));
};
onFocusChange = (focused) => {
console.log('focused')
this.setState(() => ({ focused }));
}
render(){
return (
<form className={'form-inline'}>
<input name='filter' type="text" className={'expense-filter'} value={this.props.filters.text}
onChange={(e) => {
this.props.dispatch(setTextFilter(e.target.value));
}}/>
<div className="form-group">
<select value={this.props.filters.sortBy} className="custom-select"
onChange={(e) => {
if (e.target.value === 'date') {
this.props.dispatch(sortByDate());
} else if (e.target.value === 'amount') {
this.props.dispatch(sortByAmount());
}
}}>
<option value="date">Date</option>
<option value="amount">Amount</option>
</select>
<DateRangePicker
// startDate={this.props.filters.startDate}
endDate={this.props.filters.endDate}
onDatesChange={this.onDatesChange}
focusedInput={this.state.focused}
endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
onFocusChange={this.onFocusChange}
showClearDates={true}
numberOfMonths={1}
isOutsideRange={() => false}
regular = {()=> true}
reopenPickerOnClearDates= {()=>true}
/>
</div>
</form>
)
}
}
const mapStateToProps = (state) => {
return {
filters: state.filters
};
};
export default connect(mapStateToProps)(ExpenseListFilters)
我在控制台上收到了一些警告：
index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePicker`, expected `boolean`.
以下是完整的警告信息：
index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePicker`, expected `boolean`.
in DateRangePicker (at ExpenseListFilters.js:42)
in ExpenseListFilters (created by ConnectFunction)
in ConnectFunction (at ExpenseDashboard.js:8)
in div (at ExpenseDashboard.js:7)
in ExpenseDashboard (created by Context.Consumer)
in Route (at AppRouter.js:44)
in Switch (at AppRouter.js:43)
in div (at AppRouter.js:11)
in Router (created by BrowserRouter)
in BrowserRouter (at AppRouter.js:10)
in AppRouter (at App.js:13)
in Provider (at App.js:12)
in App (at src/index.js:16)
in StrictMode (at src/index.js:15)
console.<computed> @ index.js:1
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1714
createElementWithValidation @ react.development.js:1813
render @ ExpenseListFilters.js:40
finishClassComponent @ react-dom.development.js:17160
updateClassComponent @ react-dom.development.js:17110
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:14
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ configureStore.js:17
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Failed prop type: DateRangePicker: unknown props found: regular
in DateRangePicker (at ExpenseListFilters.js:42)
in ExpenseListFilters (created by ConnectFunction)
in ConnectFunction (at ExpenseDashboard.js:8)
in div (at ExpenseDashboard.js:7)
in ExpenseDashboard (created by Context.Consumer)
in Route (at AppRouter.js:44)
in Switch (at AppRouter.js:43)
in div (at AppRouter.js:11)
in Router (created by BrowserRouter)
in BrowserRouter (at AppRouter.js:10)
in AppRouter (at App.js:13)
in Provider (at App.js:12)
in App (at src/index.js:16)
in StrictMode (at src/index.js:15)
console.<computed> @ index.js:1
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1714
createElementWithValidation @ react.development.js:1813
render @ ExpenseListFilters.js:40
finishClassComponent @ react-dom.development.js:17160
updateClassComponent @ react-dom.development.js:17110
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:14
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ configureStore.js:17
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DateRangePickerInputController`, expected `boolean`.
in DateRangePickerInputController (created by DateRangePicker)
in DateRangePicker (at ExpenseListFilters.js:42)
in div (at ExpenseListFilters.js:30)
in form (at ExpenseListFilters.js:25)
in ExpenseListFilters (created by ConnectFunction)
in ConnectFunction (at ExpenseDashboard.js:8)
in div (at ExpenseDashboard.js:7)
in ExpenseDashboard (created by Context.Consumer)
in Route (at AppRouter.js:44)
in Switch (at AppRouter.js:43)
in div (at AppRouter.js:11)
in Router (created by BrowserRouter)
in BrowserRouter (at AppRouter.js:10)
in AppRouter (at App.js:13)
in Provider (at App.js:12)
in App (at src/index.js:16)
in StrictMode (at src/index.js:15)
console.<computed> @ index.js:1
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1714
createElementWithValidation @ react.development.js:1813
render @ DateRangePicker.js:884
finishClassComponent @ react-dom.development.js:17160
updateClassComponent @ react-dom.development.js:17110
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:14
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ configureStore.js:17
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
如有任何帮助或建议，我们将不胜感激！谢谢
我遇到了同样的问题，但遵循作者的包装器示例为我解决了这个问题。当尝试添加需要首先定义的未定义道具时，就会发生这种情况。https://github.com/airbnb/react-dates/blob/master/examples/DateRangePickerWrapper.jsx