首页 > 其他 > 详细

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

时间:2019-02-13 16:49:03      阅读:373      评论:0      收藏:0      [点我收藏+]

 

使用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点击操作自动定位到另外一个元素

原文:https://www.cnblogs.com/xiaochengzi/p/10370189.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!