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

我已经有了预期的行为。但并非总是如此。有时，聚焦组件隐藏在屏幕键盘后面。我已经通过使用

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>
        );
    }
}

class KeyboardAwayView扩展组件{
建造师（道具）{
超级（道具）；
this.dummyRef=React.createRef（）；
}
render（）{
const Children=this.props.Children；
//滚动到焦点上的子组件
const ClonedChildren=React.cloneElement（子对象{
onFocus:（）=>{
this.dummyRef.current.scrollIntoView（{behavior:'smooth'}）；
设置超时（（）=>{
如果（此.dummyRef.current）{
this.dummyRef.current.scrollIntoView（{behavior:'smooth'}）；
}
}，（this.props.interval | 500））；
}
});
返回(
{克隆儿童}
);
}
}

问题：

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

有没有解决这个问题的标准方法。在React Native中有一个键盘AvoidingView。在ReactJS中有类似的东西吗

我已经经历过了

问题：有没有标准的方法来解决这个问题。在React Native中有一个键盘AvoidingView。在ReactJS中有类似的东西吗

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