这是一个非常直接的问题。注意,我有多重属性。当我选择一个值时,它只是将一个值推入数组中。因此,如果我有多个值,它将给我一个具有多个值的数组,但没有我选择的特定选项。
现在我的问题是,当我从下拉列表中删除特定值时,如何获得该特定值?我已经在Google搜索了一个小时,却没有找到答案。
<Dropdown
options={options}
onChange={this.onChange.bind(this)}
search fluid multiple selection/>
onChange(e, { value } ) {
e.preventDefault();
// e.target.value DOESN'T WORK???!!!
}
最佳答案
因此,从语义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及更低版本中运行。
关于javascript - 如何在具有多个属性的语义UI react 中查看值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53689147/