reactjs - 如何随意关注 react-select 组件？

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

当我为 Select 元素设置 ref 并尝试对其调用 .focus 时，它说没有找到焦点功能。也许我应该以某种方式获取它的子元素，然后将注意力集中在它上面？

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

我怎样才能在我想要的时候正确地让 react-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() 或 this.dropdownNode.current.focus() 调用 focus 并且都说没有找到 focus 方法。

最佳答案

因为您要包装 Select 组件，所以不能从您提供给包装器的 ref 中调用 Select 的 .focus() 函数。由于 ref 是一种特殊的 prop，该包装器的 ref 仅指代 Wrapper 本身，而不是它包装的组件(选择)。

要访问实际的 Select 组件的 ref，您必须将 ref 作为具有不同的非魔法名称的 Prop 传递给它，例如 innerRef(react-select 代码实际上提供了一个很好的示例，因为它正在访问实际的输入元素和 focusing on that )。

这是修复它的更改。这是实际使用 Select 的包装器组件(它接收传递给它的 ref):

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

这是调用该包装器的组件。在构造函数中，我使用 this.selectRef = React.createRef() 创建 ref，然后我将它作为此渲染方法中的 prop 传入:

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

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

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

关于reactjs - 如何随意关注 react-select 组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55310433/