React点击操作自动定位到另外一个元素

• Z时代
• 2024-01-10
• 分类：综合

使用Ref

方式一

使用ScrollIntoView方法

import React from 'react'
export default class ScrollToElement extends React.Component {
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.refs.targetElement.scrollIntoView()
                }}>点击定位
                </button>
                <div style={{height: '100vh', backgroundColor: 'red'}}>我的</div>
                <input ref='targetElement'/>
            </div>
        )
    }
}

方式二

使用window.scrollTo方法

import React from 'react'
export default class ScrollToElement extends React.Component {
    render() {
        return (
            <div>
                <button onClick={() => {
                    {/*this.refs.targetElement.scrollIntoView()*/}
                    window.scrollTo(0, this.refs.targetElement.offsetTop)
                }}>点击定位
                </button>
                <div style={{height: '100vh', backgroundColor: 'red'}}>我的</div>
                <input ref='targetElement'/>
            </div>
        )
    }
}

以上是 React点击操作自动定位到另外一个元素 的全部内容， 来源链接： utcz.com/z/382296.html