javascript - 当 'ref' 不可用时与 DOM 元素交互

Question

我需要在 React 组件的按钮中触发 .focus()。但它来自第 3 方库，我不能使用 ref。

到目前为止，我设法做到的唯一方法是使用 setTimeout 和 querySelector 😬，因为该元素在 componentDidMount 时不会立即可用。下面是我当前的代码:

componentDidMount() {

  window.setTimeout(() => {
    const confirmButton = document.querySelector('.confirmButton');
    confirmButton && confirmButton.focus();
  }, 1);
}

还有其他不那么丑陋的方法吗？

Answer 1

我意识到我可以将原生 Prop 发送到 Button 组件 😎

-  componentDidMount() {
-
-    window.setTimeout(() => {
-      const confirmButton = document.querySelector('.confirmButton');
-      confirmButton && confirmButton.focus();
-    }, 1);
-  }
-

...

<Button
+ autofocus