React：从转义键上的输入元素中移除焦点

Question

我有一个输入标签，当我按下转义键时，我希望输入元素上的焦点消失，这意味着不再有文本光标或任何焦点样式（当用户键入时，他们的输入不会进入输入标签）。

下面的代码是我尝试实现上述功能，但它没有按预期工作。我想让这段代码按预期工作。

import React, { useRef } from 'react';

const onEscape = function (action) {
    window && window.addEventListener('keydown', (e) => {
        if (e.key === "Escape") {
            action();
        };
    });
};

const MyComponent = () => {

    ...

    const descRef = useRef();
    onEscape(() => {
        descRef.blur();
    });

    return (
        <div>                
            <input
                ref={descRef}
                ...
            />
        </div>
   );
};

我已经测试了 onEscape 函数，当其他操作传递给它时它可以工作（当用户按下转义键时，它会执行传递给 onEscape 函数的任何函数）

Answer 1

只要看一眼你的代码，你所需要的就是将当前的属性添加到 ref 试试这个

 onEscape(() => {
    descRef.current.blur();
 });

React：从转义键上的输入元素中移除焦点

React: Remove focus from input element on escape key

focus

ref

reactjs

react-hooks

use-ref