React 中的 onKeyUp 事件

使用 React.KeyboardEvent<HTMLElement> 类型在 React 中键入 onKeyUp 事件。 KeyboardEvent 接口用于 onKeyUp 事件。 我们可以通过 event.key 访问用户按下的键的值。

import React from 'react';

const App = () => {
  // ✅ React.KeyboardEvent<HTMLElement> 类型事件
  const handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
    console.log(event.key);
    // console.log(event.code);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={handleKeyUp}
      />
    </div>
  );
};

export default App;

上述代码效果如下

React 中的 onKeyUp 事件

但是,我们在输入事件时可以更具体。

找出事件类型的最简单方法是内联编写事件处理程序并将鼠标悬停在函数中的事件参数上。

const App = () => {
  // 👇️ onKeyUp 事件是用鼠标将鼠标悬停在 `event` 参数上的
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={event => console.log(event)}
      />
    </div>
  );
};

export default App;

React 中的 onKeyUp 事件

当事件被内联写入时,我可以将鼠标悬停在事件参数上,它会告诉我事件的类型是什么。

TypeScript 能够在内联编写事件时推断事件的类型。

这非常有用,因为它适用于所有事件。 只需编写内联事件处理程序的“模拟”实现并将鼠标悬停在事件参数上即可获取其类型。

一旦我们知道事件的类型是什么,就可以提取我们的处理函数并正确键入它。

现在我们知道示例中 onKeyUp 事件的正确类型是 React.KeyboardEvent<HTMLInputElement>,我们可以提取我们的处理函数。

import React from 'react';

const App = () => {
  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
    // console.log(event.code);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onKeyUp={handleKeyUp}
      />
    </div>
  );
};

export default App;

KeyboardEvent 对象的 key 属性返回用户按下的键的值。

我们传递给 KeyboardEvent 泛型的类型是 HTMLInputElement,因为我们将 onKeyUp 事件附加到输入元素,但是我们可以将事件附加到不同的元素。

这些类型一致地命名为 HTML***Element。 一旦你开始输入 HTML..,你的 IDE 应该能够帮助你自动完成。

一些常用的类型有:HTMLInputElementHTMLButtonElementHTMLAnchorElementHTMLImageElementHTMLTextAreaElementHTMLSelectElement等。

注意 ,我们可以使用这种方法来获取所有事件的类型,而不仅仅是 onKeyUp 事件。

只要我们内联编写事件处理函数并将鼠标悬停在事件参数上,TypeScript 就能够推断出事件的类型。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React 中的 onKeyUp 事件