使用React Hooks实现FocusableInput组件首次渲染按需自动聚焦

实现思路 #

• 使用useRef钩子创建DOM引用，绑定到input元素上，用于直接调用input原生的焦点控制方法
• 使用useEffect钩子，设置空依赖数组保证逻辑仅在组件首次渲染完成后执行，判断传入的shouldFocusprop为true时触发聚焦操作

完整实现代码 #

import { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const FocusableInput = (props) => {
  // 创建存储input DOM节点的引用
  const inputRef = useRef(null);

  useEffect(() => {
    // 首次渲染完成后，判断是否需要自动聚焦
    if (props.shouldFocus && inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // 空依赖数组确保该逻辑仅在组件首次挂载后执行一次

  return <input ref={inputRef} />;
};

// 测试运行代码
document.body.innerHTML = "<div id='root' />";
ReactDOM.render(<FocusableInput shouldFocus={true} />, document.getElementById("root"));
setTimeout(() => console.log(document.getElementById("root").innerHTML));

逻辑说明 #

• 给input绑定ref后，inputRef.current会指向真实渲染的input DOM节点，可直接调用所有原生DOM方法
• 对inputRef.current增加存在性判断，避免边界场景下DOM未完成挂载时调用方法报错

内容的提问来源于stack exchange，提问作者Karim257