reactjs - 反应：从转义键上的输入元素中移除焦点

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();
 });