javascript Typescript React< Select>onChange处理程序类型错误

z6psavjg  于 2023-04-10  发布在  Java
关注(0)|答案(8)|浏览(175)

我正在尝试从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>

我的event handler:

const handleCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setValues({...values, country: event.target.value});
  };

但我得到以下错误:
类型'(事件:ChangeEvent)=〉void'不可赋值给类型'(event:ChangeEvent〈{ name?:弦|undefined; value:unknown; }〉,child:ReactNode)=〉void'。
怎么了?

szqfcxe2

szqfcxe21#

由于MUI Select不是一个真实的的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});
};
mtb9vblg

mtb9vblg2#

这对于最新的MUI 5 / Select来说再合适不过了

import { SelectChangeEvent } from "@mui/material";

   const handleOnChange = (event: SelectChangeEvent<unknown>) => {
    const value = event.target.value as YourEnumType;
  };
deyfvvtc

deyfvvtc3#

在我看来,这些都不是正确的。通常应该避免转换“as”,因为你会失去让代码推断类型所获得的类型检查。显式地将其类型为unknown,然后再将其转换为字符串也很奇怪。理想情况下,如果你真的不知道,你应该使用类型保护。为了清楚起见,如果event.target.value实际上是一个布尔值,并且我们在这里将其转换为字符串,我们将无法知道,直到应用程序稍后抛出一个错误。
文档(https://mui.com/material-ui/api/select/)将以下内容作为onChange签名:

function(event: SelectChangeEvent<T>, child?: object) => void

event: The event source of the callback. You can pull out the new value by accessing event.target.value (any). 

Warning: This is a generic event not a change event unless the change event is caused by browser autofill.

child: The react element that was selected when native is false (default).

因此,考虑到这一点,它变成了:

const handleCountryChange = (event: SelectChangeEvent) => {
  setValues({...values, country: event.target.value });
};

我们不需要在这里显式定义T为字符串,因为它默认是字符串。HTML输入作为字符串读入。

t30tvxxf

t30tvxxf4#

这对我来说似乎也是违反直觉的,但我不得不这样做:

const handleChange = (e: ChangeEvent<{ value: string | unknown }>) => formik.setFieldValue('field', e.target.value)
yvt65v4c

yvt65v4c5#

在使用Material UI时遇到了这个问题。不知道他们有自己的类型

import { SelectChangeEvent } from '@mui/material/Select';

const changeSymbol = (event: SelectChangeEvent) => {
        console.log(event)
}
0mkxixxg

0mkxixxg6#

我不知道它在哪里被记录,但选择模块也导出SelectChangeEvent。这是我用来获取它的:
import Select,{SelectChangeEvent} from '@mui/material/Select';

const handleGenerationSelectChange = (event: SelectChangeEvent<string>, child: React.ReactNode) => {
    let genHolder = currentGeneration;
    genHolder.source = event.target.value as string;
    setCurrentGeneration({...genHolder});
};
a0x5cqrl

a0x5cqrl7#

im using import Select from '@mui/joy/Select';import Option,{ optionClasses } from '@mui/joy/Option';
上面的所有解决方案都不起作用
这确实有效
const handleChange =(event:React.MouseEvent〈Element,MouseEvent〉| React.KeyboardEvent |React.FocusEvent〈Element,Element〉|null,值:return();};

zaqlnxep

zaqlnxep8#

SelectInput.d.ts中,似乎change事件的定义不正确。更多信息:https://github.com/mui-org/material-ui/issues/15400#issuecomment-484891583
尝试使用他们推荐的签名:

const handleCountryChange = (event: any) => { ... }

相关问题