Question

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

当我为Select元素设置一个ref并尝试在其上调用.focus时，它表示未找到聚焦函数。也许我应该以某种方式获取它的子元素，然后再关注它？

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

我希望如何正确获得react-select元素以获取焦点？

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

  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()调用焦点，但都说找不到焦点方法。

Answer 1

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

要访问实际的Select组件的ref，您必须将ref作为具有不同的非魔术名称的prop传递给它，例如innerRef（反应选择代码实际上给出了一个很好的例子，因为它正在访问实际的输入元素和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传递给此render方法：

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

然后我可以通过在需要的任何地方运行Select来关注this.selectRef.current.focus()组件本身。

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

如何随意关注反应选择组件？

1 个答案: