如何随意关注 react-select 组件? [英] How can I focus on a react-select component at will?

问题描述

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

Using react-select v2, I want to show and focus on the Select element when the user hits a certain key. Following are some things I've tried or paths I've gone down.

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

When I set a ref to the Select element and try to call .focus on it, it says no focus function is found. Perhaps I should somehow get a child element of it and then call focus on that?

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

There doesn't seem to be any prop I can pass that will trigger a focus function. There is an openOnFocus but not a focusOnOpen. The only thing I can think of would be to enable autoFocus and then somehow trigger a remount but there doesn't seem to be a simple way to do this and it feels hacky. Alternatively, I could enable just create the Select component each time the key is pressed instead of showing it, then unmount it instead of hiding it.

如何在我想要的时候正确地让 react-select 元素获得焦点?

How can I properly get the react-select element to gain focus when I want it to?

我在我的组件周围使用了一个包装组件.这是我的包装器的渲染方法:

I'm using a wrapper component around my component. Here's the render method for my wrapper:

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

这里是我调用包装器的地方:

And here's where I'm calling that wrapper:

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

然后我尝试使用 this.dropdownNode.focus() 或 this.dropdownNode.current.focus() 调用 focus 并且都说没有找到 focus 方法.

I then try calling focus using either this.dropdownNode.focus() or this.dropdownNode.current.focus() and both say no focus method is found.

推荐答案

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

Because you're wrapping the Select component, you can't call Select's .focus() function from the ref you're giving to the wrapper. Since ref is a special kind of prop, the ref for that wrapper is only referring to Wrapper itself, not the component it wraps (Select).

要访问实际的 Select 组件的 ref，您必须将 ref 作为具有不同的非魔法名称的 prop 传递给它，例如 innerRef(反应-select 代码实际上给出了一个很好的例子，因为它正在访问实际的输入元素和 专注于这一点).

To access the actual Select component's ref, you have to pass a ref down to it as a prop with a different, non-magic name, like innerRef (react-select code actually gives a good example of this as it's accessing the actual input element and focusing on that).

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

Here's the change that fixed it. Here is the wrapper component where Select is actually used (and it's taking in the ref passed to it):

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

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

And here's the component that's calling that wrapper. In the constructor I'm creating the ref with this.selectRef = React.createRef() then I pass it in as a prop in this render method:

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

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

Then I can call focus on the Select component itself by running this.selectRef.current.focus() anywhere I want to.

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

Notes: Thanks to BoyWithSilverWings answer. This question pertains to React 16.3. There is also a new React.ForwardRefs method but this way seems simpler to me.

这篇关于如何随意关注 react-select 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！