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

Question

这是一个非常直接的问题。注意我有多重属性。当我 select 一个值时，它只是将一个值推入一个数组。因此，如果我有多个值，它会给我一个包含多个值但不是我选择的特定选项的数组。

现在我的问题是，当我从下拉列表中删除时如何获得该特定值？我搜索了 google 一个小时，但没有找到答案。

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

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

    }

Answer 1

所以语义下拉菜单 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 });
};

在 IE8 及以下版本中，您需要一个 polyfill 运行。

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

How to see values in Semantic-UI-React with multiple attribute?

javascript

frontend

reactjs

dropdown

semantic-ui-react