reactjs - 下拉 onchange 不起作用 : React+ Typescript+ semantic-ui-react

Question

我正在尝试使用 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}
      />
  )
}

Answer 1

发生这种情况是因为库没有使用 ChangeEvent 而是使用 SyntheticEvent

Dropdown 元素上的 onChange 函数的类型是:

onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void

你可以在这里看到它们 https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.d.ts#L143

所以你应该改变这一行:

dropdownChange = (event: React.ChangeEvent<HTMLSelectElement> ,{value}) =>{

到:

dropdownChange = (event: React.SyntheticEvent<HTMLElement> ,{value}) =>{