我正在尝试使用 semantic-ui-react 和 typescript 来调出一个下拉菜单。我面临的问题是,我无法将更改处理程序附加到它。它抛出以下错误“类型‘SyntheticEvent’不可分配给类型‘ChangeEvent’”。
//Importing Dropdown
import Dropdown from 'semantic-ui-react/dist/commonjs/modules/Dropdown';
//options array
const options = [
{ key: 1, text: 'Location 1', value: 1 },
{ key: 2, text: 'Location 2', value: 2 },
{ key: 3, text: 'Location 3', value: 3 },
]
//state object
this.state ={
value : ''
}
//Dropwdown change event
dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{
this.setState({ value });
}
//Rendering Drop down
render()
{
return(
<Dropdown
options={opitons}
name="value"
value={this.state.value}
onChange={this.dropdownChange}
/>
)
}
最佳答案
发生这种情况是因为库没有使用 ChangeEvent
而是使用 SyntheticEvent
Dropdown
元素上的 onChange
函数的类型是:
onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
所以你应该改变这一行:
dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{
到:
dropdownChange = (event: React.SyntheticEvent<HTMLElement> ,{value}) =>{
关于reactjs - 下拉 onchange 不起作用 : React+ Typescript+ semantic-ui-react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56237677/