我应该如何以惯用的React方式访问生成的自定义HTML组件的子组件？

Question

我正在尝试使用自定义HTML组件创建搜索栏，用于预想文本输入。按照这个组件的构建方式，它会生成几个普通的HTML子组件，我需要对它们采取行动才能获得完整的功能。具体地说，当用户按下escape或enter时，我需要对其中一个生成的元素执行模糊操作。

我在自定义组件上使用ref并在ref上调用getElementsByClassName使其正常工作，但使用getElementsByClassName似乎不是最好的解决方案。它穿透了虚拟，并且在测试时有奇怪的副作用。

这是正在呈现的组件的一个片段：

<predictive-input id='header-search-bar-input' type='search'
  value={this.state.keywords}
  ref={(ref: any) => this.predictiveInput = ref}
  onKeyDown={(e: React.KeyboardEvent<any>) => this.handleKeyDown(e)}>
</predictive-input>

和keyDown处理程序：

private handleKeyDown(e: React.KeyboardEvent<any>) {
    // must access the underlying input element of the kat-predictive-input
    let input: HTMLElement = this.predictiveInput.getElementsByClassName('header-row-text value')[0] as HTMLElement;
    if (e.key === 'Escape') {
        // blur the predictive input when the user presses escape
        input.blur();
    } else if (e.key === 'Enter') {
        // commit the search when user presses enter
        input.blur();
        // handles action of making actual search, using search bar contents
        this.commitSearch();
    }
}

元素呈现两个子元素，一个用于栏本身，另一个用于预测下拉列表。第一个元素的底层类是“header-row-text”和“value”，所以元素被正确地选择了，但我担心这违反了正确的反应风格。

我使用的是React 16.2，所以只有回调引用可用。我宁愿避免升级，但如果16.3+解决方案足够引人注目，我可以考虑它。

Answer 1

如果你对输入没有任何控制，那么在我看来这是最好的方法。

这并不理想，但当您使用第三方组件时，您只能从可用的方法中进行选择。在这种情况下，您唯一的实际选择是根据元素的类或其在层次结构中的位置来查找元素。如果包更新了，两者都可能会改变，但如果我必须选择哪一个更稳定，我会选择className。