reactjs - 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）或函数。有什么猜测吗？

标签： reactjscreate-ref

Answer 1

我想到了。您不能像这样引用函数组件（可能使用 forwardRef）。但是稍后会将引用传递给 DOM 元素。您需要通过以下方式进行操作：

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