reactjs - 在 Popover 中引用 null

Question

我正在尝试在打开弹出框时自动聚焦输入元素。这是它的沙箱：https ://codesandbox.io/s/green-bash-x6bj4?file=/src/App.js

这里的问题是当前属性在 ref 上始终为 null。这是 forwardRef 可能有帮助的情况吗？我不太了解它，所以发布它。

任何帮助深表感谢。

Answer 1

无需为此使用 ref，只需将 autoFocus 添加到您的输入中：

<input autoFocus placeholder="search" />

Answer 2

您可以在 setState 之后简单地添加一个回调，如下所示：

    this.setState(
      {
        anchorEl: e.currentTarget,
        isPopoverOpen: true,
      },
      () => {
        setTimeout(() => {
          if (this.inputRef.current) {
            return this.inputRef.current.focus();
          }

          return null;
        }, 200);
      }
    );
  };

使用超时，您可以确保弹出窗口已安装并且输入可见，因此在超时时输入将被聚焦。使用 async/await 更适合 Promise。

Answer 3

由于您控制的open是异步的通过状态，因此当inputRef尝试获取元素时，状态尚未更新，并且Proper子项尚未创建。

您可以向 中添加 async/await 以setState使其正常工作。

const handleClick = async event => {
  await setAnchorEl(event.currentTarget);
  inputRef.current.focus();
};