1

单击开始和结束日期输入时出现此错误：

Warning: Failed prop type: Invalid prop `focusedInput` of value `[object Object]` supplied to `withStyles(DateRangePicker)`, expected one of ["startDate","endDate"].

这是我尝试过的：

为 react-dates 包创建了一个包装器组件：

const ReactDatesWrapper = (props) => {

    if (props.pickerType === 'single') {
        return (
            <div className={styles.wrapper}>
                <SingleDatePicker
                    displayFormat={() => "DD/MM/YYYY"}
                    date={props.singleDate}
                    onDateChange={props.onDateChange}
                    focused={props.focused}
                    onFocusChange={props.onFocusChange}
                    id={props.uniqueId}
                    numberOfMonths={1}
                />
            </div>
        )
    }

    return (
        <div className={styles.wrapper}>
            <DateRangePicker
                displayFormat={() => "DD/MM/YYYY"}
                startDateId={props.startDateId}
                endDateId={props.endDateId}
                startDate={props.startDate}
                endDate={props.endDate}
                onDatesChange={props.onDatesChange}
                focusedInput={props.focusedInput}
                onFocusChange={props.onFocusChange}
                numberOfMonths={1}
            />
        </div>
    )
}

将其导入我的 index.js 并编写了这两个函数和钩子：

const [startDate, setStartDate] = useState(moment());
const [endDate, setEndDate] = useState(moment());
const [focusedInput, setFocusedInput] = useState(null);

const rangeDatesChangeHandler = ({ startDate, endDate }) => {
  setStartDate(moment(startDate));
  setEndDate(moment(endDate));
}

const onFocusChangeRangeHandler = (focusedInput) => {
  setFocusedInput({ focusedInput });
}

最后，我使用这些函数作为道具：

<ReactDatesWrapper
    startDateId="start-date"
    endDateId="end-date"
    onDatesChange={rangeDatesChangeHandler}
    onFocusChange={onFocusChangeRangeHandler}
    focusedInput={focusedInput}
    startDate={startDate}
    endDate={endDate}
    uniqueId="range-picker"
/>

但是，如果不从输入中删除，我似乎会收到警告和日历本身：

Warning: Failed prop type: Invalid prop `focusedInput` of value `[object Object]` supplied to `withStyles(DateRangePicker)`, expected one of ["startDate","endDate"].

我有一个日期选择器版本，可以使用这些钩子/函数通过类似的方式工作：

const [date, setDate] = useState(moment());
const [focused, setFocused] = useState(false);

// Single date picker functions

const singleDateChangeHandler = (date) => {
    setDate(moment(date));
}

const onFocusChangeHandler = ({ focused }) => {
    setFocused(focused);
}

<ReactDatesWrapper
    pickerType="single"
    singleDate={date}
    onDateChange={singleDateChangeHandler}
    onFocusChange={onFocusChangeHandler}
    focused={focused}
    uniqueId="single-picker"
/>

我的想法是，这可能与

const [focusedInput, setFocusedInput] = useState(null);

钩子和

const onFocusChangeRangeHandler = (focusedInput) => {
   setFocusedInput({ focusedInput });
}

功能？

非常感谢任何帮助。

预期结果是能够同时更改开始日期和结束日期。

4

1 回答 1

2

结果改变了 onFocusChangeRangeHandler 函数：

const onFocusChangeRangeHandler = (focusedInput) => {
  setFocusedInput({ focusedInput });
}

至

const onFocusChangeRangeHandler = (focusedInput) => {
    setFocusedInput(focusedInput);
}

解决问题。将focusedInput 状态设置为对象是问题所在。

于 2019-10-04T15:10:33.283 回答