Typescript React <Select> onChange 处理程序类型错误
Posted
技术标签:
【中文标题】Typescript React <Select> onChange 处理程序类型错误【英文标题】:Typescript React <Select> onChange handler type error 【发布时间】:2020-02-28 17:46:12 【问题描述】:我正在尝试从 material-ui 向 Select 组件添加一个 onChange 事件处理程序:
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value=values.country
onChange=handleCountryChange
>
countries.map(c =>
return (
<MenuItem value=c>c</MenuItem>
)
)
</Select>
和我的事件处理程序:
const handleCountryChange = (event: React.ChangeEvent<htmlSelectElement>) =>
setValues(...values, country: event.target.value);
;
但我收到以下错误:
类型 '(event: ChangeEvent) => void' 不可分配给类型 '(event: ChangeEvent, child: ReactNode) => void'。
怎么了?
【问题讨论】:
【参考方案1】:对我来说似乎也违反直觉,但我不得不这样做:
const handleChange = (e: ChangeEvent< value: string | unknown >) => formik.setFieldValue('field', e.target.value)
【讨论】:
【参考方案2】:这适用于最新的 MUI 5 / Select
import SelectChangeEvent from "@mui/material";
const handleOnChange = (event: SelectChangeEvent<unknown>) =>
const value = event.target.value as YourEnumType;
;
【讨论】:
这对我不起作用。我看到SelectChangeEvent
定义为export type SelectChangeEvent<T = string> = | (Event & target: value: T; name: string ) | React.ChangeEvent<HTMLInputElement>;
我错过了什么吗?
我不得不这样做:const handleThingChanged = (event: ChangeEvent< name?: string, value: unknown>): void =>
非常接近这个的东西对我有用。从 Mui 导入事件类型定义似乎是要走的路。 const handleChange = (event: SelectChangeEvent<string>) => onMoodChange(event.target.value); ;
【参考方案3】:
由于 MUI Select 不是真正的选择元素,您需要使用 as Type
转换 e.target.value
并将处理程序键入为 React.ChangeEvent< value: unknown >
const handleCountryChange = (event: React.ChangeEvent< value: unknown >) =>
setValues(...values, country: event.target.value as string);
;
【讨论】:
即使这样也行不通。 src/core/content/content.component.tsx 第 67:37 行:解析错误:缺少分号。 65 | 66 | const handleChange = (event: React.ChangeEvent) => > 67 | const value = event.target.value as string[]; | ^ 68 |调试器; 69 |设置数据线(值); 70 | ; 是的,它不工作【参考方案4】:SelectInput.d.ts
中更改事件的定义似乎不正确。更多内容:https://github.com/mui-org/material-ui/issues/15400#issuecomment-484891583
尝试使用他们推荐的签名:
const handleCountryChange = (event: any) => ...
【讨论】:
这不是他们推荐的签名,那是一个懒惰的any
ahahah以上是关于Typescript React <Select> onChange 处理程序类型错误的主要内容,如果未能解决你的问题,请参考以下文章
当 React.Dispatch<React.SetStateAction<string>> 不被接受时,如何为 setState 函数定义 TypeScript 类型?
如何使用 Typescript 在 React 中定义 <video> 引用的类型?
如何正确定义样式组件的引用(React.RefObject<StyledComponentClass>)(对于 TypeScript)?
使用 TypeScript 在 React Native 上传递 refs:(属性) React.MutableRefObject<null>.current: null Object i