如何在office ui fabric react的SearchBox中集中注意力

Question

我无法在 Office UI Fabric React 组件的搜索框中设置焦点。

我有一个对话框，其中有一个搜索框。我在单击按钮时触发此对话框，并且一旦对话框出现，我希望焦点位于搜索框内。

我已经尝试了 Office UI Fabric 文档中提到的大部分内容。

所以，我到目前为止所尝试的：

private _searchBoxRef = React.createRef<ISearchBox>();

我的 SearchBox 组件如下所示：

<SearchBox
  componentRef={this._searchBoxRef}
  placeholder="Ask a question"
  iconProps={{ iconName: 'Chat' }} />

并且在componentDidMount钩子中：

this._searchBoxRef.current.focus();

我正在尝试在 searchBox 内设置焦点。

我已按照链接下的文档进行操作： React Guidelines for Ref Usage

有人知道我在这里做错了什么或我错过了什么吗？？

Answer 1

所以，我在尝试了几件事后找到了答案。

问题是，即使我试图将焦点放在 componentDidMount() 中，我发现 DOM 仍未准备好，并且我的模态框内的搜索框不存在。

这里可以做两件事，

1. 或者，使用 SetTimeout 等待一段时间，然后尝试聚焦
2. 如果设置重新渲染组件的状态，可以使用componentDidUpdate。如果 DOM 还没有准备好，这也可能会引起问题，所以请记住这一点。

希望这会对某人有所帮助。