0

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

<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 上显示了我：

在此处输入图像描述

在这里，我已经从列表中选择了两个元素，但它们没有显示在顶部，如下例所示：

在此处输入图像描述

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

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

更新

添加多个项目时： 在此处输入图像描述

4

1 回答 1

1

这可能是因为您设置了value="id"官方文档中的value字段字段定义为initial field value

因此，基本上，在您的代码段中，最初分配了一个静态值，并且在您选择更多结果时不会获得任何更新。

在作者的示例代码中，多选组件的使用如下：

<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用于显示组件的选定值的方法。

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

于 2017-07-10T16:33:20.067 回答