0

我正在使用 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)或函数。有什么猜测吗?

4

1 回答 1

0

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

dayPickerProps={{
    ...
    ref: el => {this.fromDayPickerRef = el},
}}
于 2021-01-30T19:12:41.980 回答