Javascript 使用react select设置multi-select

我可能只是忽略了一些东西，但我不明白为什么我不能用react select配置multi-select

这是我所看到的一张照片

请注意，在multiselect上只能选择一个项目，在清除当前项目之前，下拉列表将不再加载。此外，当项目被清除，并且您可以看到所有选项时，鼠标悬停上的高亮显示似乎不再起作用

代码：

从“React”导入React；
从“react dom”导入{render}；
从“反应选择”导入选择；
导入“react-select/dist/react-select.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
多值：null，
过滤器选项：[
{名称：“foo”，标签：“foo”}，
{名称：“酒吧”，标签：“酒吧”}，
{名称：“蝙蝠”，标签：“蝙蝠”}
]
};
this.handleMultiChange=this.handleMultiChange.bind（this）；
}
handleMultiChange（选项）{
this.setState（state=>{
返回{
多值：选项
};
});
console.log（可选）；
}
render（）{
返回(
多功能（不工作）
);
}
}
render（，document.getElementById（“根”））；

您为选择选项设置了错误的键

名称

，而不是

值

---

工作示例：

请在问题中包含您的代码。如果你曾经移除你的沙箱，这个问题对未来的读者来说是无用的！我知道我在做一些愚蠢的事。谢谢

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"));