在页面上有2个react-select组件--一个改变另一个的值

Question

import Select, { components } from "react-select";
...
handleBookKeyWordDropDown (key_wor)  {
    let keys;
    if (key_wor !== null) {
        keys = key_wor;
    } else {
        keys = []
    };
    this.setState({
        currentBook:{
            key_words: keys
        }
    });
}

handleBookBBKDropDown (bbks)  {
    let bks;
    if (bbks !== null) {
        bks = bbks;
    } else {
        bks = []
    };
    this.setState({
        currentBook:{
            bbk: bks
        }
    });
}
...
<div className="row justify-content-end">
    <div className="col-4">
        <label>Ключевые слова:</label>
    </div>
    <div className="col-8">
        <Select
            closeMenuOnSelect={false}
            options={this.state.key_words}
            value={this.state.currentBook.key_words}
            getOptionLabel={ x => x.name}
            getOptionValue={ x => x.id}
            onChange={this.handleBookKeyWordDropDown}
            isMulti
            isSearchable
            placeholder="Выберите ключевые слова"
        />
    </div>
    <div className="row justify-content-end">
        <div className="col-4">
            <label>ББК:</label>
        </div>
        <div className="col-8">
            <Select
                closeMenuOnSelect={false}
                options={this.state.bbk}
                value={this.state.currentBook.bbk}
                getOptionLabel={ x => (x.code+' '+x.description)}
                getOptionValue={ x => x.id}
                onChange={this.handleBookBBKDropDown}
                isMulti
                isSearchable
                placeholder="Выберите ББК"
            />
        </div>
    </div>
</div>

所以逻辑是:最初每一个都有自己的默认值，在改变选定值的同时，应该改变默认值。

当我在任何一个Select中改变任何东西时，问题就会出现：如果我从任何一个Select中删除任何一个选择的值，其他Select的选择值就会被删除。但之后如果我添加什么东西或者删除什么东西，一切都能正常工作。

是这样的

不知道如何处理，可能是因为缺乏React的经验。

希望得到一些帮助，伙计们! :)

Answer 1

你有 currentBook 作为一个对象，存储选择字段和 onChange 您正在创建一个新的对象，其单一选择值覆盖了第二个选择值。

把你的代码改成这样

handleBookBBKDropDown (bbks)  {
    let bks;
    if (bbks !== null) {
        bks = bbks;
    } else {
        bks = []
    };
    this.setState({
        currentBook:{
            ...this.state.currentBook, bbk: bks
        }
    });
}

handleBookKeyWordDropDown (key_wor)  {
    let keys;
    if (key_wor !== null) {
        keys = key_wor;
    } else {
        keys = []
    };
    this.setState({
        currentBook:{...this.state.currentBook, 
            key_words: keys
        }
    });
}

在这里，我使用的是 点差操作员 使用以前的 currentBook 对象，而覆盖只改变了选择值

Answer 2

问题是你覆盖了其他下拉菜单的状态值。你必须保持其他状态值在当前状态。

首先声明你的状态是这样的。

this.state = {currentBook:{bbk:[],key_words:[]}}

那就这样做。

 // handleBookKeyWordDropDown

    this.setState({currentBook:{
    ...this.state.currentBook,
                key_words: keys
        }
});

    // handleBookBBKDropDown
    this.setState({currentBook:{
    ...this.state.currentBook
                bbk: bks
        }
    });