React点击操作自动定位到另外一个元素
使用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点击操作自动定位到另外一个元素的更多相关文章
- 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 ...
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
- React 点击按钮显示div与隐藏div,并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- OpenCV和selenum实现点击操作
import cv2 as cv import numpy as np from PIL import Image, ImageDraw, ImageFont import os from selen ...
- 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求
第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...
- 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)
原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...
- JS---DOM---点击操作---part1---20个案例
点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...
- JS---DOM---点击操作---节点的方式---案例
点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 1.Qt字符编码
1.给空间设置内容,有显示中文的,必须是utf-8编码: 2.从Qt得到的字符串,如果有中文,编码是utf-8,和Linux是一样的: 3.如果使用标准的C函数,如果有中文,是gbk编码: ANSI, ...
- 关于autofac的一些具体的用法
简介:Autofac是一个.net下非常优秀,性能非常好的IOC容器(.net下效率最高的容器) 1.nuget 引用 2.创建两个类库项目,IService (用于编写接口),ServiceImpl ...
- 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调优参数因为基本复 ...
- linux服务器情况
查看Linux 进程命令 ps -aux 或者ps -ef linux 进程很多 如果需要查找某一个进程可以使用 管道和grep命令 Linux下常用命令 grep 匹配字符 ps 查询Li ...
- vs code中文扩展包
vs code 中文拓展安装失败时,可以手动下载安装,下载对版本的中文包. https://marketplace.visualstudio.com/_apis/public/gallery/publ ...
- Fiddler使用总结(转载)
原文地址:https://www.cnblogs.com/yyhh/p/5140852.html 序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存 ...
- mongo中常用的增删改查
db.students.find();//按性别分组,并显示每组的姓名db.students.aggregate({ $group:{ _id:'$sex', name:{$push:'$name'} ...
- Python模拟ICMP包
主要使用Scapy来完成 基础环境 VM1(192.168.1.226) | | VM2(192.168.1.125) vm1封装icmp包发给vm2 vm1脚本: #! /usr/bin/env p ...
- gvim keil 快捷跳转至出现错误(警告)行
开发环境 win7系统中:用keil 对工程进行编译链接,用gvim编辑查看源文件. 实现效果 一键跳转到出现警告或者错误的源码. 实现原理 gvim 调用外部shell脚本,对keil编译生成的lo ...
- MyBatis 处理sql中的 大于,小于,大于等于,小于等于
Mybatis中的sql语句中的 “<” 和 “>” 号要用转义字符 “<” 和 ”>“ ,否则会报错! 如查找年龄大于等于指定年龄的用户信息: SELEC ...