HotKey 触发 Ant Design Select 开始搜索

Posted 2023-03-17

【中文标题】HotKey 触发 Ant Design Select 开始搜索

【英文标题】：HotKey to trigger Ant Design Select to begin search

【发布时间】：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>
    )

【参考方案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/***-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