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的时候也可以用箭头函数
随机推荐
- linux > 和 >> 、< 区别
linux中经常会用到将内容输出到某文件当中,只需要在执行命令后面加上>或者>>号即可进入操作. 大于号:将一条命令执行结果(标准输出,或者错误输出,本来都要打印到屏幕上面的)重定向 ...
- 修正mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求
有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求.... 提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了 我们来看一下 腾讯新闻 的效果:
- vue 父子组件的方法调用
$emit 子组件触发父组件的方法: <!-- 子组件 --> <template> <div id="child"> <button @ ...
- opencv+python-图片文本倾斜校正
# -*- coding: UTF-8 -*- import numpy as np import cv2 ## 图片旋转 def rotate_bound(image, angle): #获取宽高 ...
- vue-cli使用sockjs即时通信
基于webSocket通信的库主要有 socket.io,SockJS,这次用的是 SockJS. 这里我们使用sockjs-client.stomjs这两个模块,要实现webSocket通信,需要后 ...
- VS2008 编译出错 fatal error C1859: unexpected precompiled header error, simply rerunning the compiler might fix this problem
https://jingyan.baidu.com/article/d8072ac49ebd23ec95cefddd.html
- [转]PID控制算法原理
PID控制算法是工业界使用极其广泛的一个负反馈算法,相信这个算法在做系统软件时也有用武之处,这里摘录了知乎上的一篇文章,后面学习更多后自己总结一篇 以下为原文: PID控制应该算是应用非常广泛的控制算 ...
- Jexus 5.4.6 on CentOS 6.6
Mono 通过脚本安装 https://github.com/cjy37/linux-asp.net-installScript 版本 3.10 MongoDB 也可通过以上脚本安装 默认端口 270 ...
- Linux内核剖析(三)构建源码树
linux源码树结构 参考 http://www.360doc.com/content/13/0410/17/7044580_277403053.shtml 目录 描述 arch 目录包括了所有和体系 ...
- Oracle&SQLServer中实现跨库查询
一.在SQLServer中连接另一个SQLServer库数据 在SQL中,要想在本地库中查询另一个数据库中的数据表时,可以创建一个链接服务器: EXEC master.dbo.sp_addlinked ...