如何关注导入的React组件中的元素？

Question

我导入了React-Search-Input，并希望以编程方式关注组件中包含的文本输入，但它不包含任何引用，也没有方法可以专注于输入。

因此，在元素上运行.focus（），并不专注于我需要的东西，即组件中的文本输入。它改为关注容器元素。

除了分支项目之外，我还有其他选择吗？谢谢！

Answer 1

您可以使用ReactDOM.findDOMNode检索元素，然后在第一个孩子上调用focus。像这样：

componentDidMount() {
    ReactDOM.findDOMNode(this.searchInput).firstChild.focus();
}

然后渲染......

<SearchInput
    className="search-input"
    onChange={this.searchUpdated}
    ref={(ref) => this.searchInput = ref}
/>