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 方法,将焦点聚焦到文本输入框上。

你可能感兴趣的:(react.js,javascript,ecmascript)