无法在 Primereact 中的下拉列表组件上设置焦点

Question

我正在尝试将焦点设置在primeact的"Dropdown"组件上，但焦点没有集中在"Dropdown"组件上。

我已经使用了 https://www.primefaces.org/primereact/#/dropdown 中给出的自动对焦属性。然后我尝试使用 react ref 来设置焦点。

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

Answer 1

专注于 PrimeReact 的Dropdown可以使用 DOM querySelector() 方法以编程方式设置。例如：

• 向Dropdown添加id

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

• 在onButtonClick函数中使用querySelector方法来查找并关注inputDropdown元素

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

Answer 2

您可以使用focusInputRef属性将焦点设置在PrimeReact的Dropdown上。 下面是一个示例：

• 创建引用：

  const dropdownRef = useRef<HTMLInputElement>(null);
  

• 在 onButtonClick 函数中，使用 ref 设置焦点：

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

• 将 focusInputRef 属性添加到下拉列表中：

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