如何让BarcodeField始终保持焦点并支持条件切换？

我有如下使用TextField的BarcodeField组件：

const BarcodeField = ({disableEnter, ...rest})=>{
   return <TextField {...(disableEnter && { onKeyDown: {(e)=>e.key === 'Enter' && e.preventDefault()} })} {...rest}>
}

并在PosCalculator组件中如下引用它：

import BarcodeField from '...etc path'
const PosCalculator = ()=>{
  return (
     <>
        <BarcodeField disableEnter fullWidth />
     </>
  )
}

我希望设置该BarcodeField始终保持焦点，即使用户点击页面主体区域；同时希望能够根据条件切换强制聚焦状态，请问该如何实现？

要实现需求，我们可以通过React的useRef手动控制输入框焦点，结合页面点击事件监听来完成，具体实现如下：

1. 修改BarcodeField组件，添加强制聚焦逻辑 #

给组件新增forceFocus属性控制是否开启强制聚焦，用useRef获取TextField实例，监听页面点击事件来自动恢复焦点：

import { useEffect, useRef } from 'react';
import TextField from '@mui/material/TextField'; // 按实际使用的组件库调整

const BarcodeField = ({ disableEnter, forceFocus = false, ...rest }) => {
  const inputRef = useRef(null);

  // 点击页面其他区域时，重新聚焦输入框
  const handlePageClick = () => {
    if (forceFocus && inputRef.current) {
      inputRef.current.focus();
    }
  };

  useEffect(() => {
    // 开启强制聚焦时，绑定页面点击监听，且初始化时自动聚焦
    if (forceFocus) {
      document.addEventListener('click', handlePageClick);
      inputRef.current?.focus();
    }

    // 组件卸载或强制聚焦状态变化时，移除监听避免内存泄漏
    return () => {
      document.removeEventListener('click', handlePageClick);
    };
  }, [forceFocus]);

  return (
    <TextField
      ref={inputRef}
      {...(disableEnter && { 
        onKeyDown: (e) => e.key === 'Enter' && e.preventDefault() 
      })}
      {...rest}
    />
  );
};

export default BarcodeField;

2. 在PosCalculator中控制强制聚焦状态 #

通过状态变量切换forceFocus的值，比如用按钮手动切换状态：

import { useState } from 'react';
import BarcodeField from '...etc path';

const PosCalculator = () => {
  const [isForceFocus, setIsForceFocus] = useState(true); // 默认开启强制聚焦

  return (
    <>
      <BarcodeField 
        disableEnter 
        fullWidth 
        forceFocus={isForceFocus} 
      />
      <button onClick={() => setIsForceFocus(!isForceFocus)}>
        {isForceFocus ? '关闭强制聚焦' : '开启强制聚焦'}
      </button>
    </>
  );
};

export default PosCalculator;

注意事项 #

• 如果使用第三方UI库的TextField（比如AntD），可能需要用inputRef替代直接ref，具体参考对应组件的官方文档。
• 监听事件绑定在document上，必须在状态变化或组件卸载时移除，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Islam Y-