react-dates <DateRangePicker /> onFocusChange函数无效属性警告

Question

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

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 });
}

函数？

非常感谢您的帮助。

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

Answer 1

结果是，将onFocusChangeRangeHandler函数从：

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

至

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

修复了问题。将focusedInput状态设置为对象是问题所在。