javascript - 无法将焦点设置在 Primereact 中的下拉组件上

Question

我正在尝试将焦点集中在 primereact 的“下拉”组件上，但焦点并未转到“下拉”组件。

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

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

Answer 1

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

• 添加id到您的Dropdown

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

• 在onButtonClick函数中使用querySelector方法来查找和关注input元素Dropdown

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