使用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点击操作自动定位到另外一个元素的更多相关文章

  1. Codeforces Round #304 (Div. 2) B. Soldier and Badges【思维/给你一个序列,每次操作你可以对一个元素加1,问最少经过多少次操作,才能使所有元素互不相同】

    B. Soldier and Badges time limit per test 3 seconds memory limit per test 256 megabytes input standa ...

  2. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  3. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  4. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  5. OpenCV和selenum实现点击操作

    import cv2 as cv import numpy as np from PIL import Image, ImageDraw, ImageFont import os from selen ...

  6. 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求

    第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...

  7. 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

    原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...

  8. JS---DOM---点击操作---part1---20个案例

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  9. JS---DOM---点击操作---节点的方式---案例

    点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 1.Qt字符编码

    1.给空间设置内容,有显示中文的,必须是utf-8编码: 2.从Qt得到的字符串,如果有中文,编码是utf-8,和Linux是一样的: 3.如果使用标准的C函数,如果有中文,是gbk编码: ANSI, ...

  2. 关于autofac的一些具体的用法

    简介:Autofac是一个.net下非常优秀,性能非常好的IOC容器(.net下效率最高的容器) 1.nuget 引用 2.创建两个类库项目,IService (用于编写接口),ServiceImpl ...

  3. mysql 的mgr集群

    mysql 的mgr集群 http://wubx.net/mgr%E7%9B%91%E6%8E%A7%E5%8F%8A%E4%BC%98%E5%8C%96%E7%82%B9/ MGR调优参数因为基本复 ...

  4. linux服务器情况

    查看Linux 进程命令  ps -aux 或者ps -ef linux 进程很多 如果需要查找某一个进程可以使用 管道和grep命令 Linux下常用命令  grep  匹配字符   ps 查询Li ...

  5. vs code中文扩展包

    vs code 中文拓展安装失败时,可以手动下载安装,下载对版本的中文包. https://marketplace.visualstudio.com/_apis/public/gallery/publ ...

  6. Fiddler使用总结(转载)

    原文地址:https://www.cnblogs.com/yyhh/p/5140852.html 序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存 ...

  7. mongo中常用的增删改查

    db.students.find();//按性别分组,并显示每组的姓名db.students.aggregate({ $group:{ _id:'$sex', name:{$push:'$name'} ...

  8. Python模拟ICMP包

    主要使用Scapy来完成 基础环境 VM1(192.168.1.226) | | VM2(192.168.1.125) vm1封装icmp包发给vm2 vm1脚本: #! /usr/bin/env p ...

  9. gvim keil 快捷跳转至出现错误(警告)行

    开发环境 win7系统中:用keil 对工程进行编译链接,用gvim编辑查看源文件. 实现效果 一键跳转到出现警告或者错误的源码. 实现原理 gvim 调用外部shell脚本,对keil编译生成的lo ...

  10. MyBatis 处理sql中的 大于,小于,大于等于,小于等于

    Mybatis中的sql语句中的  “<”  和   “>”  号要用转义字符   “<”   和  ”>“ ,否则会报错! 如查找年龄大于等于指定年龄的用户信息: SELEC ...