React 中的 ref 如何操作 dom节点，使输入框获取焦点

聚焦文字输入框

.focus() 获取焦点

当用户点击按钮时，handleClick 函数会被调用，从而将焦点聚焦到文本输入框上。

// 焦文字输入框
import {
    
     useRef } from "react";

const FocusForm = () => {
    
    
  const inputRef = useRef<any>(null);

  function handleClick() {
    
    
    // 获取输入框焦点
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={
    
    inputRef} />
      <button onClick={
    
    handleClick}>Focus the input</button>
    </>
  );
};

export default FocusForm;

定义一个名为 handleClick 的函数。当按钮被点击时，这个函数会被调用。在函数内部，我们通过 inputRef.current 获取到 inputRef 引用所指向的 DOM 元素，并调用其 focus 方法，将焦点聚焦到文本输入框上。