どのようにして、各値を反応選択で先に進めることができますか

Question

反応選択マルチ選択オプションを使用すると、選択した各値のデフォルト動作は互いに後で挿入されます。

この動作は、ここでMultiSelectオプションのサンプルサイトで確認できます。 https://jedwatson.github.io/react-select/

各値のコンポーネントを後ではなく前に挿入するにはどうすればよいですか？ これを行うには何らかのトリックがありますか？

ここはコードボックスです。 https://codesandbox.io/s/y8RD0GVWg

ありがとうございます。

Answer 1

選択した値を注文する秘密は、変更を処理する関数にあります。

新しい選択をそれぞれ連結するので、配列に分割して逆にすることができます。

handleSelectChange = value => { 
    const data = value.split(','); 

    const d = [ 
     data[data.length-1], 
     ...data.slice(0, data.length - 1), 
    ] 

    console.log("You've selected:", value, data, d); 

    this.setState({ value: d }); 
    };