頁面上的 2 個反應選擇組件 - 一個更改另一個的值

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

You have currentBook as an object which store the value of both select fields and onChange you are creating a new object with single select value overriding the second select value

將您的代碼更改為此

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 object 和覆蓋只更改了 select 值

Answer 2

問題是您正在覆蓋其他下拉列表的 state 值。 您必須在當前 state 中保留其他 state 值。

首先像這樣聲明您的 state：

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