React - useRef - 打开焦点选择框

Question

我想在获得焦点时打开一个选择框。我正在使用带有

useRef

的 React hooks。 我找到了几种使用

ref.current.click()

的解决方案。但它没有按预期工作。我是不是做错了什么？

这是简化的代码：

import {useRef, forwardRef} from 'react';

export default function App() {

  const ref = useRef(null);

  return (
    <div className="App">
      <input type="text" name="text" value="" onChange={(e) => console.log(e)} />
      <br />
      <br />
      <SelectBox 
        ref={ref}
      />
    </div>
  );
}

const SelectBox = forwardRef((props, ref) => {
  function onFocus() {
    if(ref.current) {
      ref.current.click();
    }
  }

  return (
    <select
      ref={ref}
      onChange={(e) => console.log(e)}
      onFocus={onFocus}
    >
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
    </select>
  )
});

或者还有其他解决方案来打开焦点选择框（显示选项）吗？

Answer 1

打开选择框的行为由浏览器控制。因此，您发现使用 ref 打开选择框很困难，但您可以使用替代方法来实现此功能。这是适合我的代码。

        const SelectBox = forwardRef((props, ref) => {
      const [isOpen, setIsOpen] = useState(false);

      const handleFocus = () => {
        setIsOpen(true);
      };

      const handleBlur = () => {
        setIsOpen(false);
      };

      return (
        <select
          ref={ref}
          onChange={(e) => console.log(e)}
          onFocus={handleFocus}
          onBlur={handleBlur}
          size={isOpen ? 3 : 1} // change this as per your number of options
        >
          <option value="1">Test 1</option>
          <option value="2">Test 2</option>
          <option value="3">Test 3</option>
        </select>
      );
    });