react-day-picker ref 当前 scrollIntoView 不可访问

Question

我正在使用 react-day-picker。单击输入后，我想滚动到“日历”- DayPicker 组件（问题是当页面滚动时，日历不在视口中。我尝试了这种方法（简化）：

import React from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';

class DatePicker extends React.Component {
    constructor(props) {
        super(props);
        this.fromDayPickerRef = React.createRef();
        this.toDayPickerRef = React.createRef();

        this.handleOnDayPickerShow = ref => { this[ref].current.scrollIntoView() }
    }
    render() {
        const {from, to} = this.state;
        const modifiers = {start: from, end: to};
        return (
            <div className="InputFromTo">
                <DayPickerInput
                    ...
                    dayPickerProps={{
                        ...
                        ref: this.fromDayPickerRef,
                    }}
                    ...
                    onDayPickerShow={() => this.handleOnDayPickerShow("fromDayPickerRef")}
                /><br/>
                <span className="InputFromTo-to">
                    <DayPickerInput
                        ...
                        dayPickerProps={{
                            ...
                            ref: this.toDayPickerRef,
                        }}
                        ...
                        onDayPickerShow={() => this.handleOnDayPickerShow("toDayPickerRef")}
                    />
                </span>
            </div>
    }
}

我可以访问 .current 但没有 HTML DOM 道具（例如 offSetTop）或功能。猜猜看？

Answer 1

我明白了。你不能像这样只引用函数组件（可能使用 forwardRef）。但是引用稍后传递给 DOM 元素。您需要按照以下方式进行操作：

dayPickerProps={{
    ...
    ref: el => {this.fromDayPickerRef = el},
}}

react-day-picker ref 当前 scrollIntoView 不可访问

react-day-picker ref current scrollIntoView not accessible

reactjs

create-ref