Reactjs 我怎样才能随心所欲地专注于react select组件？

使用react select v2，我想在用户点击某个键时显示并关注select元素。以下是一些我尝试过的事情或我走过的道路

当我将ref设置为Select元素并尝试对其调用

.focus

时，它表示找不到focus函数。也许我应该从中得到一个孩子的元素，然后把注意力放在这个上面

似乎没有任何道具可以触发聚焦功能。有一个

openOnFocus

，但没有一个

focusOnOpen

。我能想到的唯一一件事就是启用自动对焦，然后以某种方式触发重新装载，但似乎没有一种简单的方法可以做到这一点，而且感觉很粗糙。或者，我可以启用只在每次按键时创建选择组件，而不是显示它，然后卸载它而不是隐藏它

当我需要时，如何正确地使react select元素获得焦点

我正在我的组件周围使用包装器组件。以下是我的包装器的呈现方法：

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

render（）{
返回(
);
}

这就是我称之为包装器的地方：

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

---

然后，我尝试使用

this.dropdownNode.focus（）

或

this.dropdownNode.current.focus（）

调用focus，两者都表示找不到focus方法。

因为您正在包装

选择
组件，所以无法从您提供给包装器的ref调用Select的
.focus（）
函数。由于
ref
是一种特殊的道具，因此该包装的ref仅指
wrapper
本身，而不是它所包装的组件（Select）

要访问实际的
Select
组件的ref，您必须将ref作为具有不同的非魔法名称的道具传递给它，如
innerRef
（react-Select-code实际上提供了一个很好的示例，因为它正在访问实际的输入元素和属性）

这是修正它的零钱。下面是实际使用Select的包装器组件（它接受传递给它的ref）：

然后我可以通过运行
this.selectRef.current.focus（）
来调用
Select
组件本身的焦点

注意：感谢BoyWithSilverWings的回答。该问题与反应16.3有关。还有一个新的
React.ForwardRefs
方法，但这种方法对我来说似乎更简单。
React select
在它的ref上有一个焦点函数，你能告诉我们你是如何尝试的吗？@BoyWithSilverWings啊，在这种情况下，可能是因为我在它上面实现了一个包装器组件。所以我需要公开焦点函数。我将尝试这样做，如果不起作用，则发布代码。看起来react select autoFocus属性正在调用inputRef上的
.focus（）
，如下所示：我使用的是react select v2.4.4。对我有效的是
这个。selectRef.focus（）
。也许有一天它会对某些人有用。嗨，你们有一个codesandbox的例子吗？我也面临同样的问题。
  render() {
    return (
      <Select
        options={this.props.options}
        value={this.state.value}
        ref={this.props.innerRef}
      />
    );
  }

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