React-Select 多值不会像示例中那样填充所选项目

Question

我正在尝试在我的应用程序中使用 react-select (https://github.com/JedWatson/react-select)，我有一个 select 框，其选项是动态加载的（即我调用后端获取数据）。现在我可以看到我的下拉列表中填充的所有选项，但是当我单击任何项目时 onChange() 事件有效但该元素没有从下拉列表中取消填充并显示在顶部像官方示例中所示的标签.我的 select 盒子：

<Select
    multi={true}
    name="form-field-name"
    options={this.props.metadata ? this.props.metadata["latest"].languages : []}
    labelKey="display_name"
    valueKey="id"
    onChange={this.addLanguage}
    clearable={false}
    value="id"
/>

这显示我在 UI:

这里我已经select编辑了列表中的两个元素，但它们没有像下面的例子那样显示在顶部：

我在我的组件中导入了 js 和 css，如下所示：

import Select from 'react-select';
import 'react-select/dist/react-select.css';

更新

添加多项时：

Answer 1

可能是因为你设置字段value="id"在官方文档中value字段定义为initial field value

所以基本上，在您的代码段中，最初分配了一个静态值，并且在您 select 更多结果时没有得到任何更新。

在作者的example代码中，multi select组件的使用方式如下：

<Select 
  multi 
  simpleValue 
  disabled={this.state.disabled} 
  value={this.state.value} 
  placeholder="Select your favourite(s)" 
  options={this.state.options} 
  onChange={this.handleSelectChange} />

因此，只要有变化，onChange 事件就会使用 handleSelectChange 方法。

handleSelectChange (value) { console.log('You\'ve selected:', value); this.setState({ value }); },

此方法然后更新 this.state.value，用于显示组件的 selected 值。

我不知道你的 this.addLanguage 方法目前做了什么，但如果我们以作者的例子作为基准，你需要做的是而不是 value="id" 你应该将它更新为 value={this.state.value} 并使用 this.addLanguage 方法，您应该更新 this.state.value

的值

React-Select 多值不会像示例中那样填充所选项目

React-Select multivalue does not populate selected items like in example

reactjs

react-select