(一)需要
最近在学习 React,学到了 React Hook 做了 useRef Demo。
(二)介绍
应用 useRef
是为了批改某个 DOM 节点相干的操作。
上面的 Demo 是应用 useRef
实现,input 输入框获取焦点的例子。
/*
* @Author: ArdenZhao
* @Date: 2022-04-19 10:47:35
* @LastEditTime: 2022-04-19 10:54:38
* @FilePath: /react-ts/src/components/react/11-Hook-useRef.js
* @Description: file information
*/
import {useRef, useEffect} from 'react';
import {Input} from 'antd';
import "antd/dist/antd.css";
function HookUseRef(props) {
// 由 useRef 申明一个变量
const inputRef = useRef(null);
useEffect(() => {console.log('[ inputRef] >', inputRef)
inputRef.current.focus();}, []);
return (
<div>
<h1>Learn, {props.name}</h1>
<Input type="text" id="name" ref={inputRef} />
{/* <input type="text" ref={inputRef} /> */}
</div>
);
}
export default HookUseRef
写在最初的话
学习路上,经常会懈怠。
《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…
如果有须要的搭档,能够加我微信:learningisconnecting
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)