时间戳

首页 > 解决方案 > 页面上的 2 个反应选择组件 - 一个更改另一个的值

reactjs - 页面上的 2 个反应选择组件 - 一个更改另一个的值

问题描述

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 经验。

寻求帮助，伙计们！:)

标签： reactjsreact-select

解决方案

您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对象并覆盖仅更改的选择值

推荐阅读