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的时候也可以用箭头函数
随机推荐
- Tracing Memory access of an oracle process : Intel PinTools
https://mahmoudhatem.wordpress.com/2016/11/07/tracing-memory-access-of-an-oracle-process-intel-pinto ...
- .Net转Java.01.从Main(main)函数说起
在C#中,main函数的签名可以有四种 static void Main(string[] args)static void Main()static int Main(string[] args)s ...
- AS使用lombok注解报错:Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.
Rebuild时报错信息如下所示: Error:Execution failed for task ':app:javaPreCompileDebug'.> Annotation process ...
- IntelliJ IDEA web项目 工程构建运行部署
- linux 杀死进程
列车进程 ps -ef 杀死进程 - 后面是pid kill 1234356
- react diff 原理
(1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...
- http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
- ELK 6.X 版本下xpack破解
ELK 6.2.2 版本下xpack破解 1.下载xpack 先下载最新版本的 x-pack,里面包含了 es,kibana,logstash 新版本的x-pack 下载地址:https://arti ...
- 单片机成长之路(51基础篇) - 015 关于sdcc的多文件编译范例二
本文是续 单片机成长之路(51基础篇) - 009 关于sdcc的多文件编译范例(一)编写的. 在实际的工作中,单片机的头文件和功能函数不可能同全部放在同一个文件夹下面,我们把单片机成长之路(51基础 ...
- LaTeX中的各种距离设置总结
LaTeX中的各种距离设置总结 1. 页面设置 A4 会给你一个较小的页面,为了使用更多的控制,可用 geometry宏包 和 命令 \layout . 2. 改变长度 在latex里改变长度 ...