React-Bootstrap FormControl禁用再启用后丢失焦点问题求助

问题说明 #

使用React-Bootstrap的FormControl组件时，禁用控件后再启用会导致输入框丢失焦点，无论采用非受控还是受控输入模式，该问题都存在。

解决方案 #

核心思路是在控件重新启用时，手动将焦点恢复到输入框上。通过useRef获取输入框的DOM引用，结合useEffect监听状态变化，在合适时机触发焦点设置。

修改后的完整代码 #

import { useState, useRef, useEffect } from 'react';
import { Form } from 'react-bootstrap';

const SearchInput = ({ onChange, inputRef, ...props }) => {
  return (
    <Form
      onSubmit={evt => {
        evt.preventDefault();
        onChange();
      }}
    >
      <Form.Control ref={inputRef} {...props} />
    </Form>
  );
};

const App = (props) => {
  const [search, setSearch] = useState();
  const [searching, setSearching] = useState(false);
  const inputRef = useRef(null);

  // 监听searching状态，控件启用时恢复焦点
  useEffect(() => {
    if (!searching && inputRef.current) {
      inputRef.current.focus();
    }
  }, [searching]);

  const handleSearch = () => {
    setSearching(true);
    setTimeout(() => {
      setSearching(false);
    }, 2000);
  };

  return (
    <div>
      <SearchInput
        autoFocus
        disabled={searching}
        defaultValue={search}
        onChange={handleSearch}
        inputRef={inputRef}
      />
      <div>{search}</div>
    </div>
  );
};

关键代码解释 #

• useRef获取DOM引用：创建inputRef并传递给子组件的FormControl，让父组件能直接访问输入框的DOM元素。
• useEffect监听状态切换：当searching从true变为false（控件重新启用）时，调用focus()方法手动恢复焦点。
• 子组件传递ref：子组件接收inputRef属性并绑定到FormControl的ref上，确保父组件能正确获取输入框引用。

问题根源 #

浏览器在控件被禁用时会自动移除输入框的焦点，而React-Bootstrap在重新启用控件时，不会自动恢复之前的焦点状态，因此需要手动触发焦点设置。

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