我正在尝试从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'。
怎么了?
8条答案
按热度按时间szqfcxe21#
由于MUI Select不是一个真实的的select元素,因此需要使用
as Type
强制转换e.target.value
,并将处理程序输入为React.ChangeEvent<{ value: unknown }>
mtb9vblg2#
这对于最新的MUI 5 / Select来说再合适不过了
deyfvvtc3#
在我看来,这些都不是正确的。通常应该避免转换“as”,因为你会失去让代码推断类型所获得的类型检查。显式地将其类型为
unknown
,然后再将其转换为字符串也很奇怪。理想情况下,如果你真的不知道,你应该使用类型保护。为了清楚起见,如果event.target.value
实际上是一个布尔值,并且我们在这里将其转换为字符串,我们将无法知道,直到应用程序稍后抛出一个错误。文档(https://mui.com/material-ui/api/select/)将以下内容作为onChange签名:
因此,考虑到这一点,它变成了:
我们不需要在这里显式定义T为字符串,因为它默认是字符串。HTML输入作为字符串读入。
t30tvxxf4#
这对我来说似乎也是违反直觉的,但我不得不这样做:
yvt65v4c5#
在使用Material UI时遇到了这个问题。不知道他们有自己的类型
0mkxixxg6#
我不知道它在哪里被记录,但选择模块也导出SelectChangeEvent。这是我用来获取它的:
import Select,{SelectChangeEvent} from '@mui/material/Select';
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();};
zaqlnxep8#
在
SelectInput.d.ts
中,似乎change事件的定义不正确。更多信息:https://github.com/mui-org/material-ui/issues/15400#issuecomment-484891583尝试使用他们推荐的签名: