Не удается установить фокус на компонент Dropdown в Primereact

Question

Я пытаюсь сфокусироваться на компоненте "Dropdown" основной реакции, но фокус не на компоненте "Dropdown".

Я использовал свойство autoFocus, как указано в https://www.primefaces.org/primereact/. Затем я попытался использовать ответную ссылку для установки фокуса.

https://codesandbox.io/s/dropdownautofocus-jko5d

Answer 1

Сосредоточьтесь на PrimeReact Dropdownможно задать программно с помощью метода DOM querySelector(). Например:

• Добавить id на ваш Dropdown

   <Dropdown id="dropdown" ... />
  
   <Button onClick={onButtonClick} label="Set the focus" />
  

• В onButtonClick использование функции querySelector способ найти и сосредоточиться на input элемент Dropdown

  const onButtonClick = () => {
     document.querySelector('#dropdown input').focus();
  };
  

Answer 2

Вы можете сосредоточиться на PrimeReactDropdownиспользуя функцию focusInputRef . Вот пример:

• Создайте ссылку:

          const dropdownRef = useRef<HTMLInputElement>(null);
  

• В функции onButtonClick используйте ссылку для установки фокуса:

          const onButtonClick = () => {
      if (dropdownRef) dropdownRef.current?.focus();
  };
  

• Добавьте параметр focusInputRef в раскрывающийся список:

          <Dropdown focusInputRef={dropdownRef} ... />