[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 to use the useRef hook to measure the width of an element as it changes.
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom"; import "./styles.css"; function useInput(defaultValue) {
const [value, setValue] = useState(defaultValue) function onChange(e) {
setValue(e.target.value)
} return {
value,
onChange
}
} function App() {
const input = useInput("");
const messageRef = useRef(); useEffect(() => {
const boundingBox = messageRef.current.getBoundingClientRect();
console.log(boundingBox.width);
}); return (
<div className="App">
<h1>How to useRef in React</h1>
<input {...input} />
<div>
<span ref={messageRef}>{input.value}</span>
</div>
</div>
);
} const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
[React] Create a Persistent Reference to a Value Using React useRef Hook的更多相关文章
- [React] Forward a DOM reference to another Component using forwardRef in React 16.3
The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerfu ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- 关于React.PropTypes的废除,以及新版本下的react的验证方式
React.PropTypes是React用来typechecking的一个属性.要在组件的props上运行typechecking,可以分配特殊的propTypes属性: class Greetin ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App
项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...
- [React] Create and import React components with Markdown using MDXC
In this lesson I demonstrate how to use the library MDXC to create and import React components with ...
- [React] Create component variations in React with styled-components and "extend"
In this lesson, we extend the styles of a base button component to create multiple variations of but ...
- [React] Create & Deploy a Universal React App using Zeit Next
In this lesson, we'll use next to create a universal React application with no configuration. We'll ...
- [React] Create an Animate Content Placeholder for Loading State in React
We will create animated Content Placeholder as React component just like Facebook has when you load ...
随机推荐
- fcntl和flock两个系统调用的区别
总的来说,flock函数只能锁定整个文件,无法锁定文件的某一区域.而fcntl可以利用struct flock结构体,来实现文件里部分区域锁定的操作. 附:fcntl(文件描述词操作) 相关函数 op ...
- 大数据学习笔记【一】:Hadoop-3.1.2完全分布式环境搭建(Windows 10)
一.前言 Hadoop原理架构本人就不在此赘述了,可以自行百度,本文仅介绍Hadoop-3.1.2完全分布式环境搭建(本人使用三个虚拟机搭建). 首先,步骤: ① 准备安装包和工具: hadoop-3 ...
- IT学习的计算机网络内容
1.一种结构:数据结构 参考书目:<大话数据结构>.<数据结构(C#语言描述)>.<剑指Offer> ①线性表部分: 线性表(上){ 数组.ArrayList } ...
- 少儿编程Scratch第三讲:宇宙大战.枪战游戏
小朋友这周的表现还算不错.周末多数时间都由我陪(bi)着(zhe)做课本上的数学题,后来还学了英语.任重道远啊,语数外都还得加强,还远不到自己就能取得好成绩的阶段. 上周说好这周要做一个发射炮弹的游戏 ...
- shell习题第11题:输入数字执行命令
[题目要求] 写一个脚本实现如下功能:输入一个数字,然后运行对应的一个命令 显示命令如下: *cmd menu* 1--data 2--ls 3--who 4--pwd 输入1时,会运行data [ ...
- Codeforces 1097D. Makoto and a Blackboard
传送门 首先考虑如果 $n$ 只有一个质因数的情况,即 $n=p^t$ 那么显然可以 $dp$ ,设 $f[i][j]$ 表示第 $i$ 步,当前剩下 $p^j$ 的概率 那么转移很简单: $f[i] ...
- ECMAScript中的原型继承
//ECMAScript中的原型继承//ECMAScript中的继承主要是依靠原型链实现的.(关于原型链的介绍,详见<高三>6.3.1章节 P162) //本文示例主要为了说明SubTyp ...
- git遇到的问题记录2019.05.07
用sourcetree拉取代码,报错如下: error: cannot lock ref 'refs/remotes/origin/my_branch': unable to resolve refe ...
- 手工实现HttpBasic校验
HttpBasic: 是RFC中定义的一种控制HTTP协议访问资源的方式.具体当HTTP请求受限资源时,就需要在请求头中添加以"Authorization"为key的heade ...
- ActiveMQ入门系列一:认识并安装ActiveMQ(Windows下)
一.什么是ActiveMQ 度娘给出的定义: Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件:由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Jav ...