如何才能随意关注一个react-select组件呢？

使用react-select v2，我想在用户按下某个键时显示并聚焦于 Select 元素。以下是我尝试过的一些事情或我走过的路。

当我设置对 Select 元素的引用并尝试调用.focus上面说没有找到焦点功能。也许我应该以某种方式获取它的子元素，然后调用焦点？

似乎没有任何我可以传递的道具会触发焦点功能。有一个openOnFocus但不是focusOnOpen。我唯一能想到的就是启用自动对焦，然后以某种方式触发重新安装，但似乎没有一种简单的方法可以做到这一点，而且感觉很糟糕。或者，我可以在每次按下按键时创建 Select 组件而不是显示它，然后卸载它而不是隐藏它。

当我想要的时候，如何正确地让反应选择元素获得焦点？

我在我的组件周围使用了包装组件。这是我的包装器的渲染方法：

  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.selectRef}
      />
    );
  }

这就是我调用该包装器的地方：

        <Wrapper
          options={this.props.labelOptions}
          ref={this.wrapperRef}
        />

然后我尝试使用以下任一方法调用焦点this.dropdownNode.focus() or this.dropdownNode.current.focus()两者都说没有找到对焦方法。

因为你正在包裹Select组件，你不能调用 Select 的.focus()来自您提供给包装器的引用的函数。自从ref是一种特殊的 prop，该包装器的 ref 仅指Wrapper本身，not它包装的组件（选择）。

要访问实际的Select组件的 ref，您必须将 ref 作为具有不同的非魔术名称的 prop 传递给它，例如innerRef（反应选择代码实际上给出了一个很好的例子，因为它正在访问实际的输入元素并且专注于那个 https://github.com/JedWatson/react-select/blob/master/src/Select.js#L471).

这是修复它的更改。这是实际使用 Select 的包装器组件（并且它接收传递给它的引用）：

  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.props.innerRef}
      />
    );
  }

这是调用该包装器的组件。在构造函数中，我使用以下命令创建引用this.selectRef = React.createRef()然后我将它作为此渲染方法中的道具传递：

        <Wrapper
          options={this.props.labelOptions}
          innerRef={this.selectRef}
        />

然后我可以调用焦点Select通过运行组件本身this.selectRef.current.focus()我想去的任何地方。

Notes:感谢 BoyWithSilverWings 的回答。这个问题与 React 16.3 有关。还有一个新的React.ForwardRefs方法，但这种方法对我来说似乎更简单。