React技巧之输入onFocus和onBlur事件

chuckQu

发布于 2022-08-19 15:27:25

1.9K0

发布于 2022-08-19 15:27:25

文章被收录于专栏：前端F2E

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

作者：Borislav Hadzhiev[2]

正文从这开始~

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

// 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参数上。

const App = () => {
  // 👇️ events are written inline
  // hover over the `event` parameter with your mouse

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        defaultValue=""
        onFocus={event => console.log(event)}

        onBlur={event => console.log(event)}
      />
    </div>
  );
};

export default App;

当事件被内联写入时，TypeScript能够推断出事件的类型。这是非常有用的，因为它适用于所有事件。只需编写内联事件处理程序的“模拟”实现，并将鼠标悬停在event参数上来获取其类型。

一旦知道了事件的类型，就能够提取处理函数并正确地类型声明它。

现在我们知道了示例中onFocus和 onBlur的正确类型，是React.FocusEvent<HTMLInputElement, Element> 。我们可以提取我们的处理函数。

import React from 'react';

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

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

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

export default App;

我们传递给FocusEvent泛型的类型是HTMLInputElement，因为我们将事件附加到一个input元素，但是你可以将事件附加到一个不同的元素上。