typescript onInputChange属性上的事件是什么类型的事件？

3lxsmp7m 于 2022-12-14 发布在 TypeScript

关注(0)|答案(2)|浏览(329)

我尝试在mui v4自动完成组件上使用React.ChangeEvent，因为我不想使用任何。然而，它却抛出了一个错误，即当前事件不兼容。

const handle = (e: React.ChangeEvent<HTMLTextAreaElement>, currentValue: string, reason: string) => {
  console.log(e,currentValue,reason)
  }

<Autocomplete onInputChange={handle}/>

typescript

来源：https://stackoverflow.com/questions/74772107/what-kind-of-event-type-is-the-event-on-the-oninputchange-props

2条答案

按热度按时间

wd2eg0qa1#

您可以使用TypeScript的inference功能沿着一些type utilities来派生您所询问的函数签名。
下面是一个在处理函数上使用类型注解的示例：
TSPlayground

import { type ChangeEvent } from 'react';
import {
  Autocomplete,
  type AutocompleteInputChangeReason,
     //^? (alias) type AutocompleteInputChangeReason = "input" | "reset" | "clear"
} from '@material-ui/lab';

type OnInputChange = Parameters<typeof Autocomplete>[0]['onInputChange'];

const handleInputChange: OnInputChange = (event, value, reason) => {
  event;
//^? (parameter) event: ChangeEvent<{}>

  value;
//^? (parameter) value: string

  reason;
//^? (parameter) reason: AutocompleteInputChangeReason

  // Your implementation here
};

请注意，Autocomplete组件函数是泛型的，但是在我的测试中，所提供的泛型类型中的任何变化似乎都不会影响用于内部ChangeEvent参数的泛型类型，结果总是ChangeEvent<{}>。
ChangeEvent（来自React）的类型是ChangeEvent<T = Element>，因此如果您要将目标定位到特定元素，则可以使用上面的信息手动编写自己的兼容函数签名，但要使用最适合您的场景的特定元素类型。

赞(0）回复(0）举报 2022-12-14

tct7dpnv2#