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

Question

我试图将焦点集中在 primereact 的“Dropdown”组件上，但焦点并未集中在“Dropdown”组件上。

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

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

Answer 1

可以使用 DOM querySelector() 以编程方式设置 PrimeReact 的 Dropdown 焦点方法。例如:

• 将 id 添加到您的下拉列表

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

• 在 onButtonClick 函数中使用 querySelector 方法查找并聚焦于 Dropdown 的 input 元素

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