页面上的 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 的选定值将被删除。但在那之后，如果我添加或删除任何内容，一切正常。

This is how it happens

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

寻求帮助，伙计们！ :)

Answer 1

问题是您覆盖了其他下拉列表的状态值。您必须将其他状态值保持在当前状态。

首先像这样声明你的状态：

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

Answer 2

您将 currentBook 作为对象存储了 select 字段的值，并且 onChange 您正在创建一个新对象，其中单个 select 值覆盖第二个select 值

将您的代码更改为此

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

在这里，我使用 Spread operator 来使用之前的 currentBook 对象并且仅覆盖更改的 select 值

页面上的 2 个 react-select 组件 - 一个更改另一个的值

2 react-select components on page - one changes value of another

reactjs

react-select