Как прокрутить выделенный компонент, чтобы увидеть отображение экранной клавиатуры в React JS?

Question

Я уже получил ожидаемое поведение. Но не всегда. Иногда сфокусированный компонент скрыт за экранной клавиатурой. Я исправил это с помощью scrollIntoView и setTimeout. Это поможет, если выделенный компонент не прокручивается автоматически.

Мое решение:

    class KeyboardAwayView extends Component {

    constructor(props) {
        super(props);
        this.dummyRef = React.createRef(); 
    }

    render() {
        const Children = this.props.children;
        // Scroll to children component on focus
        const ClonedChildren = React.cloneElement(Children, {
            onFocus: () => {
                this.dummyRef.current.scrollIntoView({ behavior: 'smooth' });
                setTimeout(() => {
                    if (this.dummyRef.current) {
                        this.dummyRef.current.scrollIntoView({ behavior: 'smooth' });
                    }
                }, (this.props.interval | 500));
            }
        });
        return (
            <div className="keyboard-away-container">
                {ClonedChildren}
                <div className="dummy" ref={this.dummyRef}></div>
            </div>
        );
    }
}

Вопросы :

1. Что можно сделать, чтобы улучшить мое решение?

2. Есть ли стандартный способ решения этой проблемы. В React Native есть KeyboardAvoidingView . Есть ли что-то подобное в ReactJS?

Я уже прошел через это Есть ли какое-либо событие javascript, запускаемое при открытии экранной клавиатуры на мобильном сафари или chrome? .

Answer 1

Вопрос: Есть ли стандартный способ решить эту проблему. В React Native есть KeyboardAvoidingView. Есть ли что-то подобное в ReactJS?

Нет, не является стандартным способом для обработки этого в React (я полагаю, вы имеете в виду реагирующий домен).