语义 UI React 下拉列表未设置 onChange 值：React+ Typescript

Question

我正在实现语义-ui-react 下拉菜单，但我无法在更改事件时设置此下拉菜单的值。

不胜感激

//options object
const options =  [
  {name: "val1" , label: "val1"},
  {name: "val2" , label: "val2"},
  {name: "val3" , label: "val3"}
]

this.state= {location: ''} //state object


//onchange event
dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({[data.name]:data.value})
}

//select component
<Select options={options}
  name="location"  
  value={this.state.location}
  onChange={this.dropdownChange}
/>

Answer 1

编辑：您需要向数据数组添加一个 value 键。

看看他们如何在示例中生成数据：

const countryOptions = _.map(faker.definitions.address.country, country => ({
  key: country,
  text: country,
  value: country
}));

旧答案： onChange 处理程序 (it prints undefined in this codesandbox)

中没有 data.name 这样的属性

我猜你应该在状态中填充 location 键：

dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({location: data.value})
}

Answer 2

你可以这样试试

//onchange event
dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
    this.setState({[event.target.name]:data.value})
}

语义 UI React 下拉列表未设置 onChange 值：React+ Typescript

Semantic UI React dropdown does not set the value onChange: React+ Typescript

typescript

reactjs

semantic-ui-react