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"> < ...
随机推荐
- csrf jsonp
网站b中包含向网站a发送的请求,那么网站b就会获得网站a的cookie,网站a登录了则网站b的cookie中会有网站a的sessionid,此时如果网站a对外提供需要sessionid的jsonp接口 ...
- python3 编码解码
字符换算 比特(bit) 计算机最小的存储单位 字节(byte) 1 bit = 1 位 8 bit = 1 byte 1024 bytes = 1 kb 1024 kb = 1 mb 1024 mb ...
- Oracle sql function LISTAGG
select business_unit, voucher_id, listagg( vat_txn_type_cd, ',') within group (order by business_uni ...
- Jmeter笔记(Ⅱ)使用Jmeter实现轻量级的接口自动化测试
接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...
- 浅谈Linux文件与目录权限
作为一个程序员,在工作的过程中或多或少都会接触都Linux,那么对于权限这块肯定有所了解,今天有空想谈谈觉得比较绕的权限问题,即文件权限与目录权限 1.文件权限,对于文件权限这个是比较简单的,也很容易 ...
- NN元数据工作机制
HDFS的实现思路:1.HDFS通过分布式集群来存储文件,为客户端提供便捷的访问方式2.文件存储到HDFS集群去的时候,被切分为block3.HDFS存放在若干datanode节点 上4.HDFS文件 ...
- laravel composer
composer config -g repo.packagist composer https://packagist.phpcomposer.com 改安装包的全局镜像网址
- Python strip()与lstrip()、rstrip()
.strip()方法可以根据条件遍历字符串中的字符并一一去除 默认去除字符串中的头尾空格 “ Alins ”.“ AA BB CC ”用了之后就是 “Alins”.“AA BB CC” ...
- redis知识点汇总
1. redis是什么 2. 为什么用redis 3. redis 数据结构 4. redis中的对象类型 5. redis都能做什么?怎么实现的的? 6. redis使用过程中需要注意什么 7. 数 ...
- 用Java实现图片验证码功能
一.什么是图片验证码? 可以参考下面这张图: 我们在一些网站注册的时候,经常需要填写以上图片的信息. 1.图片生成实体类: package com.hexianwei.graphic; import ...