react-selectでマルチセレクトを設定する

Question

私はおそらく何かを見落としているかもしれませんが、なぜ私がリアクションセレクトでマルチセレクトを設定できないのか分かりません。

ここには私が見ているもののworking exampleがあります。

複数選択で1つのアイテムしか選択できないことに注意してください。そして、現在のアイテムがクリアされるまで、ドロップダウンはロードされなくなります。また、項目が消去され、すべてのオプションが表示される場合は、マウスオーバー時のハイライト表示が機能しなくなったように見えます。

コード：

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

選択したオプション

の作業例えば間違ったキーname代わりのvalue設定したい：https://codesandbox.io/s/yj804nzpv