时间戳

首页 > 解决方案 > 当 'ref' 不可用时与 DOM 元素交互

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

问题描述

我需要.focus()在 React 组件上触发一个按钮。但它来自第 3 方库，我无法使用ref.

到目前为止，我设法做到的唯一方法是使用 setTimeout 和 querySelector，因为该元素不是立即可用的componentDidMount。贝娄是我目前的代码：

componentDidMount() {

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

有没有其他不那么丑陋的方法来实现这一目标？

标签： javascriptreactjsdomreact-dom

解决方案

我意识到我可以将原生道具发送到 Button 组件

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

...

<Button
+ autofocus

推荐阅读