React技巧之输入onFocus和onBlur事件

2022-08-19 15:27:25 浏览数 (1)

原文链接：https://bobbyhadz.com/blog/typescript-react-onfocus-onblur-event-type[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

在React中，使用React.FocusEvent<HTMLElement> 类型来类型声明onFocus和onBlur事件。FocusEvent接口用于onFocus和onBlur事件。

代码语言：javascript复制
// App.tsx

import React from 'react';

const App = () => {
  const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
    console.log(event);
  };

  const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
    console.log(event);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    </div>
  );
};

export default App;

我们将事件类型声明为React.FocusEvent<HTMLElement>，因为FocusEvent类型用于React中的onFocus和onBlur事件。

然而，我们在输入事件时可以更具体一些。找出事件类型的最简单方法是内联编写事件处理，并将鼠标悬停在函数中的event参数上。

代码语言：javascript复制
const App = () => {
  // 


	


html https 网络安全 react typescript 




	






	

 0 人点赞