我可能只是忽略了某些东西,但我无法弄清楚为什么我似乎无法使用react-select配置多选。
这是我所看到的working example。
请注意,在多选中只能选择一个项目,然后在清除当前项目之前不再加载下拉列表。此外,当项目被清除,并且您可以看到所有选项时,看起来鼠标悬停上的突出显示不再有效。
代码:
import React from "react";
import { render } from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";
class App extends React.Component {
constructor() {
super();
this.state = {
multiValue: null,
filterOptions: [
{ name: "foo", label: "Foo" },
{ name: "bar", label: "Bar" },
{ name: "bat", label: "Bat" }
]
};
this.handleMultiChange = this.handleMultiChange.bind(this);
}
handleMultiChange(option) {
this.setState(state => {
return {
multiValue: option
};
});
console.log(option);
}
render() {
return (
<div>
<label>Multi (not working)</label>
<Select
name="filters"
placeholder="Filters"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange}
multi
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));