关于react.js:Day-43100-React-Hook之useRef基本用法

(一)需要

最近在学习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
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理