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的时候也可以用箭头函数
随机推荐
- u-boot-2018-09 分析 v1
下载地址: https://pan.baidu.com/s/1YcQ1XpFyzmNcr1afw1RhgQ 或者:
- 利用referer属性,记录百度搜索跳转参数
从百度搜索结果跳转到指定链接前,百度会发送一些参数,可以利用referer属性,在本站访问时记录百度跳转来之前的一些参数. 利用百度跳转前参数,进行一些相关的seo优化. 目前所用到的一些参数说明如下 ...
- golang gob 有什么优势? gob/protobuf/json/xml 效率对比,benchmark 压力测试
TODO 待研究: https://blog.csdn.net/love_se/article/details/7941876 https://blog.csdn.net/wangshubo1989/ ...
- centos7防火墙iptables开放常用端口
清除所有规则: iptables -F 开放常用tcp端口: iptables -I INPUT -p tcp -m multiport --dports 20,21,22,3690,80,443,4 ...
- Initialize a vector in C++ (5 different ways)
https://www.geeksforgeeks.org/initialize-a-vector-in-cpp-different-ways/ Following are different way ...
- 生产系统ELK日志采集系统
总结下,生产在运转的日志采集系统!后续的扩展在于elasticsearch节点与logstash节点与kafka+zookeeper,目的提高吞吐量!
- 使用 Nginx 为 Linux 实例绑定多个域名
KB: 41467 · 更新时间:2018-11-16 20:26:51 Nginx 是一款广泛应用的 Web 服务器,常用于反向代理.负载均衡器以及 HTTP 缓存等.本文以 CentOS ...
- 关于inodes占用100%解决方法
df -i; 发现inode节点占满: 这个时候如果不知道哪儿节点占用多可以用下边的脚本进行检查,查看到底哪个目录下面的文件最多: for i in /*; do echo $i; find $i | ...
- SNF软件开发机器人-子系统-功能-数据列表分页与不分页-瀑布式分页-如何配置?
[列表]分页 1.效果展示: (1)不分页 (2)普通分页 (3)瀑布式分页 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中选择需要的分页方式.普通分页和瀑布式分页需要配合 ...
- Github上 10 个开源免费且优秀的后台控制面板(转)
https://github.com/ant-design/ant-design-pro https://mp.weixin.qq.com/s/Hn6hI-ubGw6N16nFzPdVLA