Reactjs 反应日期<；日期范围选择器/>；onFocusChange函数无效属性警告

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

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

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

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

我已经让单日期选择器版本通过类似的方式使用以下挂钩/函数：

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 onFocusChangeRangeHandler = (focusedInput) => {
   setFocusedInput({ focusedInput });
}

功能

非常感谢您的帮助

---

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

结果是将onFocusChangeRangeHandler函数从以下位置更改为：

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

到

解决了这个问题。将focusedInput状态设置为对象是一个问题

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

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

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

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