如何滚动焦点组件以查看在 React JS 中显示的屏幕键盘？

Posted 2023-03-14

【中文标题】如何滚动焦点组件以查看在 React JS 中显示的屏幕键盘？

【英文标题】：How to scroll focused component in to view on showing On-screen keyboard in React JS?

【发布时间】：2019-10-03 17:36:06

【问题描述】：

我已经得到了预期的行为。但并非总是如此。有时，焦点组件隐藏在屏幕键盘后面。我已经使用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>
        );
    

问题：

有什么可以改进我的解决方案的吗？

有什么标准方法可以解决这个问题。在 React Native 中有一个 KeyboardAvoidingView。 ReactJS 中有类似的东西吗？

我已经经历过这个Is there any javascript event fired when the on-screen keyboard on mobile safari or chrome opens?。

【参考方案1】：

问题：有什么标准方法可以解决这个问题。在 React Native 中有一个 KeyboardAvoidingView。 ReactJS 中有类似的东西吗？

不，没有标准方法在 React 中处理这个问题（我假设您指的是 react-dom）。