react useRef()函数
“ref”对象是一个通用容器,其current属性是可变的
保存dom
function Test() {
const t = useRef(null);
useEffect(() => {
l(t.current); // div
});
return (
<div ref={t}> ... </div>
);
}
保存事件程序
function Test() {
const t = useRef(null);
function handleClick() {
t.current = setTimeout(() => l(1), 2000);
}
function handleClear() {
clearTimeout(t.current);
}
return (
<>
<button onClick={handleClick}>start</button>
<button onClick={handleClear}>clear</button>
</>
);
}
存储以前的值
function Test() {
const t = useRef(null);
const [name, setName] = useState("ajanuw");
useEffect(() => {
t.current = name;
});
const prevName = t.current;
return (
<div>
<input value={name} onChange={e => setName(e.target.value)} />
<h2>{name}</h2>
<p>{prevName}</p>
</div>
);
}
react useRef()函数的更多相关文章
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- React事件处理函数传参问题
React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- (转)React事件处理函数必须使用bind(this)的原因
1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...
- [React] Create a Persistent Reference to a Value Using React useRef Hook
The useRef is a hook for creating values that persist across renders. In this lesson we'll learn how ...
- React事件函数简介
一.事件汇总 二.例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...
- React事件处理函数的bind复用和name复用
一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...
- react 中 函数bind 和箭头函数
用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数
随机推荐
- 什么是crf
什么是crf 利用crf++进行实体识别的流程 确定标签体系: 确定特征模板文件: 处理训练数据文件: 模型训练. 确定标签体系 大部分情况下,标签体系越复杂准确度也越高,但相应的训练时间也会增加.因 ...
- Java8 利用Lambda处理List集合
List<User> list = new ArrayList<User>(); User user1 = new User("第一位","用户1 ...
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- Python计算分位数
Python计算分位数 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/gdkyxy2013/article/details/80911514 ...
- hdu5299 Circles Game
Circles Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Tot ...
- PPTP服务端与客户端 修改默认PPTP默认端口1723
linux pptp服务端:我们在Linux下建立的pptpd端口号默认是1723,有时候这个端口并不是那么的好用,不是麽?所以服务端修改端口号比较简单 修改 /etc/services 文件查找 1 ...
- linux:gpg加密和解密
http://www.bubuko.com/infodetail-650747.html
- hive使用python脚本导致java.io.IOException: Broken pipe异常退出
反垃圾rd那边有一个hql,在执行过程中出现错误退出,报java.io.IOException: Broken pipe异常,hql中使用到了python脚本,hql和python脚本最近没有人改过, ...
- ELK 6.X 版本下xpack破解
ELK 6.2.2 版本下xpack破解 1.下载xpack 先下载最新版本的 x-pack,里面包含了 es,kibana,logstash 新版本的x-pack 下载地址:https://arti ...
- Linux内核剖析(三)构建源码树
linux源码树结构 参考 http://www.360doc.com/content/13/0410/17/7044580_277403053.shtml 目录 描述 arch 目录包括了所有和体系 ...