[React] Reference a node using createRef() in React 16.3
In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new createRef()
method in React 16.3.
Additional Resources: refs and the dom
You can use 'React.createRef()' to create a ref object. Then to access it from <obj>.current.<ref_name>
import React from "react";
import { render } from "react-dom"; class App extends React.Component {
fullName = React.createRef(); handleBlur = () => {
this.fullName.current.blur();
}; handleFocus = () => {
this.fullName.current.focus();
}; render() {
return (
<div className="section">
<div className="field">
<label className="label">Full Name</label>
<div className="control">
<input className="input" ref={this.fullName} type="text" />
</div>
</div>
<button
className="button is-link is-outlined"
onClick={this.handleFocus}
>
Focus
</button>{" "}
<button
className="button is-danger is-outlined"
onClick={this.handleBlur}
>
Blur
</button>
</div>
);
}
} render(<App />, document.getElementById("root"));
[React] Reference a node using createRef() in React 16.3的更多相关文章
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native v0.4 发布,用 React 编写移动应用
React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests ...
- React躬行记(5)——React和DOM
React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的rea ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- React.js入门笔记(续):用React的方式来思考
本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...
- 五分钟学习React(三):纯HTML代码搭建React应用
上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...
- 【React】383- React Fiber:深入理解 React reconciliation 算法
作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliat ...
- 没有用到React,为什么我需要import引入React?
没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...
随机推荐
- jstl 标签 循环 序号
大家好: 今天搜了一天.最终找到它了,尽管不是我想要的,可是为了我辛苦的一天.我也要记录下: <c:forEach items="${signBusList}" var ...
- WPF中StringToImage和BoolToImage简单用法
在WPF的绑定控件操作中,经常会通过bool值或者某些特定的string值做出相应动作.但UI层控件的很多属性对应的都不是Bool值或者对应的只是固定的String值. 这个时候有两方法解决该问题. ...
- Netty简单介绍(非原创)
文章大纲 一.Netty基础介绍二.Netty代码实战三.项目源码下载四.参考文章 一.Netty基础介绍 1. 简介 官方定义为:”Netty 是一款异步的事件驱动的网络应用程序框架,支持快速地 ...
- kubernetes系列
目录: 介绍的全部可以在github上找到,链接 haoprogrammer kubernetes学习:(一).kubeadm搭建kubernetes(v1.13.1)单节点集群 kubernete ...
- Java设计模式-策略模式详解
前言 在软件领域中,设计模式作为一种经典的开发实践常常需要我们去深入的理解,而策略模式作为设计模式的一种,使用频率也是相对来说比较高的,在Java中,当我们学习TreeSet集合的时候,就采用了经典的 ...
- Gerapy 使用详解
https://blog.csdn.net/fengltxx/article/details/79894839
- caffe 参数介绍 solver.prototxt
转载自 http://blog.csdn.net/cyh_24/article/details/51537709 solver.prototxt net: "models/bvlc_alex ...
- C - Puzzles
Problem description The end of the school year is near and Ms. Manana, the teacher, will soon have t ...
- week2 notebook2
Beginning day2: 1.基础数据类型宏观: 1.1.整型:int:1,2,3 1.2.字符串:str:‘anthony’ 1.2.1: 索引:索引即下标,就是字符串组成的元素从第一个开始, ...
- HTML与CCS(十一)
1.1 HTML介绍 1.1.1 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) s ...