在 react-select 中重新排序 multi select

Question

我将 react-select 与 isMulti 属性一起使用，以允许用户从月份列表（一月至十二月）中选择 select。如果用户 select 的月份出现问题，我希望重新订购 select 的商品。

如何重新订购 selected 商品？

这是我要录制的内容的截图：

这是我的代码：

handleChange = (selectedOptions, action) => {
    selectedOptions.sort((a, b) => { // <=== THIS DOESN'T WORK
        return a.value - b.value;    // <=== THIS DOESN'T WORK
    });                              // <=== THIS DOESN'T WORK
    this.setState({selectedOptions});
    const {onSelectedOption} = this.props;
    onSelectedOption(selectedOptions);
};


render() {
    const {selectedOptions, options, error} = this.state;
    return (
        <div>
            <Select
                isMulti
                closeMenuOnSelect={false}
                value={selectedOptions}
                onChange={this.handleChange}
                options={options}
                isClearable={false}
                isSearchable={false}
                placeholder="Months..."
                classNamePrefix="react-select"
            />
            {error && <div className="alert alert-danger">{error}</div>}
        </div>
    );
}

Answer 1

除了你比较值的方式错误之外，你离解决方案真的很近：

selectedOptions.sort((a, b) => { 
  return a.value - b.value; --> this returns NaN
});

a 和 b 值都是 Strings 所以你应该这样做：

selectedOptions.sort((a, b) =>
  a.value.localeCompare(b.value)
);

如果您想按字母顺序排列它们。

在 react-select 中重新排序 multi select

Reorder multi select in react-select

reactjs

react-select