如何在Semantic-UI-React中查看具有多个属性的值？-Java 学习之路

这是一个非常直截了当的问题 . 注意我有多个属性 . 当我选择一个值时，它只是将一个值推入一个数组 . 因此，如果我有多个值，它将给我一个具有多个值的数组，但不是我选择的特定选项 .

现在我的问题是如何从Dropdown中获取特定值？我找到了答案 .

<Dropdown 
    options={options} 
    onChange={this.onChange.bind(this)}
    search fluid multiple selection/>

onChange(e,  { value } ) {
        e.preventDefault();     
       // e.target.value DOESN'T WORK???!!!

    }

1 回答

0
因此，从语义UI下拉似乎并不能提供开箱即用的功能 . 然而，有一个很好的方法来实现这一目标 . 首先，创建一个状态：
```
this.state = {
  selected: [],
}
```
然后，将函数绑定到Dropdown组件，如下所示：
```
<Dropdown
  placeholder="Skills"
  fluid
  multiple
  selection
  options={options}
  onChange={this.handleChange}/>
```
完成后，编写 handleChange 函数以比较每次更改时的数组长度 . 如果状态数组比从下拉列表中获得的数组长，则该项目已被删除，您可以检查哪一个 . 否则，将数组转储到该状态 .
```
handleChange = (e, { value }) => {
    if (this.state.selected.length > value.length) { // an item has been removed
        const difference = this.state.selected.filter(
            x => !value.includes(x),
        );
        console.log(difference); // this is the item
        return false;
    }
    return this.setState({ selected: value });
};
```
你需要一个polyfill在IE8及以下版本中运行 .
回复于 2024-05-05T21:06:45+08:00

如何在Semantic-UI-React中查看具有多个属性的值？

1 回答

相关问题