Question

下拉菜单正常运行，直到添加onClick（）为止。我猜想语义UI有一些onClick（）内置函数，因此当我调用它时，该项目不会显示为带有“ x”选项的选定选项。

onChange（）不起作用。

class Wines extends Component {

  state = {
    wines: [],
    list: []
  };

  handleDropdown = (event, {value}) => {
    this.setState({ list: value})
    console.log(value)
  }

  render() {
    const options = [
      { key: 'France', text: 'France', value: 'France', onClick: this.handleDropdown },
      { key: 'Spain', text: 'Spain', value: 'Spain'},
      { key: 'Portugal', text: 'Portugal', value: 'Portugal' }
    ]

    return (
      <Dropdown placeholder='Countries' fluid multiple selection options={options} />
    )
  }
}

export default Wines;

Answer 1

很有可能按预期工作。我检查了语义UI下拉菜单here的文档。在这方面，它对您没有任何作用。

一个问题是您没有在点击处理程序中建立列表。您只需替换刚刚单击的值即可。您每次都需要在顶部构建

setState({ list: [...this.state.list, value] })

如前所述，它对您没有任何魔力，因此您必须根据放在this.state.list中的物品自己修改道具。我建议再次在数组上进行映射，因此您不必重复对每个条目的相等性检查进行硬编码。

const options = [
    { key: 'France', text: 'France', value: 'France', onClick: this.handleDropdown },
    { key: 'Spain', text: 'Spain', value: 'Spain'},
    { key: 'Portugal', text: 'Portugal', value: 'Portugal' }
]

const optionsToRender = options.map(dropdownEntry => {
    if (this.state.list.includes(dropdownEntry.value)) {
        dropdownEntry.somePropYouWantToChange = 'some value you want to assign it to'
    }
    return dropdownEntry
})

<Dropdown placeholder='Countries' fluid multiple selection options={optionsToRender} />

onClick会覆盖语义UI的下拉菜单

1 个答案: