React: hook(7) useRef

最新推荐文章于 2024-04-08 18:21:57 发布

amadeus_liu2

最新推荐文章于 2024-04-08 18:21:57 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/126502123

React 专栏收录该内容

34 篇文章

订阅专栏

该博客介绍了如何在React中创建一个名为TextInputWithFocusButton的组件，该组件包含一个输入框和一个按钮。当点击按钮时，输入框会自动获取焦点。文章通过使用`useRef`钩子来实现这一功能，展示了React中状态管理和DOM操作的基本应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import logo from './logo.svg';
import { Routes, Route, Link } from "react-router-dom";
import {react,useState,useEffect,useLayoutEffect,useContext,useReducer,useCallback,useMemo} from "react"
import {useRef} from "react"
import './App.css';
import React from "react"



function TextInputWithFocusButton() {
  const inputElement = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputElement.current.focus();
  };
  return (
    <>
      <input ref={inputElement} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}



export default TextInputWithFocusButton;