Question

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

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

这是我尝试过的：

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

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

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

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

挂钩和

every

功能？

任何帮助，我们将不胜感激。

预期的结果是可以更改开始日期和结束日期。

Answer 1

原来是从以下位置更改onFocusChangeRangeHandler函数：

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

到

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

解决了问题。问题在于将focusedInput状态设置为对象。

react-dates <DateRangePicker /> onFocusChange函数无效的prop警告

1 个答案: