HotKey 触发 Ant Design Select 开始搜索答案

【问题标题】：HotKey to trigger Ant Design Select to begin searchHotKey 触发 Ant Design Select 开始搜索
【发布时间】：2021-03-12 06:03:17
【问题描述】：

我正在使用“react-hotkeys-hook”并使用我的热键工作（可以通过 onFocus() 看到登录控制台）。目标是有一个热键，可以打开并将光标添加到 Select 组件。（使用 ant 设计 - 'antd'）

我遇到的问题是，当我触发热键时，显然没有事件传递给 onFocus - 我如何将事件传递给 onFocus 以便它的工作方式与我单击它时一样？或者我应该以不同的方式解决这个问题。我尝试在 Select 组件中使用 open={true or false} ，这可以工作，但不会添加光标！

    useHotkeys('shift+p', () => onFocus());

    const hotKeyOpenSearch = () => {
    // pass searchbar event here?
        onFocus()
        console.log('hotkey shift+p')
    } 

    const onFocus = (e) => {
        console.log(e)
    }

    return (
        <Select
            showSearch
            style={{ width: searchW, paddingLeft: searchP }}
            dropdownStyle={{ zIndex: 9999 }}
            placeholder="???? Fuzzy Search"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
        >
    </Select>
    )

【问题讨论】：

标签： javascript reactjs hotkeys

【解决方案1】：

你在正确的轨道上，但onFocus 仅用于接收事件；您不能以任何会以编程方式重新聚焦选择组件的方式调用该方法。但是，您可以使用热键调用there is a .focus() method exposed by antd，但它需要获取对已安装组件的引用。这是一个可行的解决方案：

import React, { useRef } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { Select } from "antd";

export default function App() {
  useHotkeys('shift+p', () => {
    // kind of hackish, but without timeout,
    // the hotkey will be sent to select input
    setTimeout(() => {
      selectRef.current.focus();
    }, 20);
  });

  // This will hold reference to `<Select>`
  const selectRef = useRef(null);

  return (
    <div className="App">
      <Select
        showSearch
        style={{ width: 200, paddingLeft: 10 }}
        dropdownStyle={{ zIndex: 9999 }}
        placeholder="? Fuzzy Search"
        optionFilterProp="children"
        ref={selectRef}
        showAction={['focus']}
        autoFocus={true}
      >
        <Select.Option key="blue">Blue</Select.Option>
        <Select.Option key="red">Red</Select.Option>
      </Select>
    </div>
  );
}

您会注意到，除了使用 ref 之外，我还必须进行另一项重大更改 - 更改 <Select> 组件上的两个参数：

showAction={['focus']}
autoFocus={true}

这是因为没有它们，它会移动光标，但无法触发下拉菜单和“花式”选择菜单；详情请见issue #8269。

沙盒链接

codesandbox.io/s/stackoverflow-65071488-t89q0

【讨论】：

谢谢 - 将实现这一点，让你知道我发现了什么。通过显式获取 elementId 并使用 vanilla，我确实发现我认为一种更 hacky 的方式，但可能值得重构！

【解决方案2】：

对于想要打开焦点下拉菜单的人，使用onFocus 和onBlur 方法设置/取消设置状态中的键并将该键用作autoFocus 的值。

onFocus = {() => this.setState({ isSelectFocussed: true })}
onBlur = {() => this.setState({ isSelectFocussed: false })}
showAction = "focus"
autoFocus = { this.state.isSelectFocussed }

【讨论】：