使用 react-select 设置 multi-select

Question

我可能只是忽略了一些东西，但我无法弄清楚为什么我似乎无法使用 react-select 配置 multi-select。

这是我所看到的working example。

请注意，在 multiselect 上只能 select 编辑一个项目，然后在清除当前项目之前不再加载下拉列表。此外，当项目被清除并且您可以看到所有选项时，看起来鼠标悬停时的突出显示不再有效。

代码：

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

Answer 1

您为 select 选项设置了错误的键 name 而不是 value

工作示例：https://codesandbox.io/s/yj804nzpv

使用 react-select 设置 multi-select

Setting up multi-select with react-select

javascript

reactjs

react-select