使用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. 美团笔试(web前端)

    分为3部分: 1.逻辑推理.行测.找规律: 2.html css javascript的简单的选择题,以及数据结构,操作系统方面的知识: 3.两道编程题,第一道题关于竞赛报名,有限制的分组,输入N和M ...

  2. 数据仓库建模对比: 比较表格和多维解决方案 (Comparing tabular and multidimensional solutions)

    笔记记下来,划重点: https://docs.microsoft.com/zh-cn/sql/analysis-services/comparing-tabular-and-multidimensi ...

  3. *** target pattern contains no `%'. Stop.

    windows上的ndk工程移到linux下编译就报这个错, 解决方法,把jni目录下obj目录删除,重新编译就好了

  4. java实现栈的简单操作

    public class stract { public static void main(String[] args) { MyStack stack = new MyStack(20); stac ...

  5. ArrayList 和 LinkList 的区别

    ArrayList 的相关知识 public class ArrayList<E> extends AbstractList<E>implements List<E> ...

  6. hibernate连接数据库和使用

    hibernate.cfg.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibe ...

  7. postergresql允许其它主机远程连接

    1.pg_hba.conf中添加listen_addresses = '*' #vim /usr/local/postgresql/data/pg_hba.conf #listen_addresses ...

  8. 利用BLEU进行机器翻译检测(Python-NLTK-BLEU评分方法)

    双语评估替换分数(简称BLEU)是一种对生成语句进行评估的指标.完美匹配的得分为1.0,而完全不匹配则得分为0.0.这种评分标准是为了评估自动机器翻译系统的预测结果而开发的,具备了以下一些优点: 计算 ...

  9. liunx驱动----按键中断

    liunx 中断 先设置异常入口 异常向量 void __init trap_init(void) 构造了异常向量 vector_irq+offset       按下按键: cpu自动进入异常模式 ...

  10. C博客作业03--函数

    1. 本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这几周学习了函数,题目还是原样只是多了种做题的方法.一开始看书感觉声明,定义啊,还有全局变量那些,文绉 ...