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

我正在导入React-Search-Input并希望以编程方式专注于组件中包含的文本输入，但它不包含参考和没有方法专注于输入。如何关注导入的React组件中的元素？

因此，在元素上运行.focus（），并不关注我需要什么，这是组件内的文本输入。它将重点放在容器元素上。

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

2016-08-30 Slbox

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

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

然后渲染...

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

来源

2016-08-30 15:09:39

这是一个真正美丽的一小段代码。我不知道ref回调是多么有用。非常感谢你为我解决了一个我未能通过其他许多方式解决的问题的简单解决方案。 – Slbox

不幸的是，即使它的工作原理为重点，似乎会导致以下错误打破我的应用程序的其余部分：遗漏的类型错误：为什么我会得到任何想法无法读取空的特性“焦点”，如果它对焦点工作正常吗？ – Slbox

不幸的是，这并没有为我工作，但这是什么（并感谢你指着我在正确的方向） 'componentDidMount（）{ ReactDOM.findDOMNode（this.refs.myRef）.firstChild.focus（） ; }' 如果你知道为什么你的方式不能完全为我工作，我会有兴趣更多地使用ref回调。 – Slbox

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

回答

相关问题