Question

我正在实现语义用户界面反应下拉列表，并且无法在更改事件上设置此下拉列表的值。

我们将不胜感激

//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
}));

旧答案： data.name处理程序（it prints undefined in this codesandbox）中没有onChange这样的属性

我想您应该在状态下填充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

2 个答案: