javascript - 从react-native-multiple-select获取文本

Question

我使用react-native-multiple-select来选择项目并且它工作正常，但是它存储在状态中的值是id。我想获取所选项目的文本。

const items = [{
id: '92iijs7yta',
name: 'Ondo'
 }, {
 id: 'a0s0a8ssbsd',
name: 'Ogun'
}, {
id: '16hbajsabsd',
name: 'Calabar'
}, {
id: 'nahs75a5sg',
name: 'Lagos'
 }, {
id: '667atsas',
name: 'Maiduguri'
}, {
id: 'hsyasajs',
name: 'Anambra'
}, {
id: 'djsjudksjd',
name: 'Benue'
}, {
id: 'sdhyaysdj',
name: 'Kaduna'
}, {
id: 'suudydjsjd',
name: 'Abuja'
}
];

和国家

constructor(props) {
super(props);
this.state = { 
 selectedItems : [], 
  }; }

多选组件

          <MultiSelect
              hideTags
              items={items}
              uniqueKey="id"
              ref={(component) => { this.multiSelect = component }}
              onSelectedItemsChange={this.onSelectedItemsChange}
              selectedItems={selectedItems}
              selectText="Companions"
              searchInputPlaceholderText="Search Items..."
              onChangeInput={ (text)=> console.log(text)}// am not getting this on the console.
               tagRemoveIconColor="#CCC"
              tagBorderColor="#CCC"
              tagTextColor="#CCC"
              selectedItemTextColor="#CCC"
              selectedItemIconColor="#CCC"
              itemTextColor="#000"
              displayKey="name"
              searchInputStyle={{ color: '#CCC' }}
              submitButtonColor="#CCC"
              submitButtonText="Submit"
            /> 

以及设置 selectedItems 的函数

   onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems }); 
    console.log(this.state.selectedItems);//here am getting ids ,i want to get the selected   item test,store it in array and and send to php server
  };

Answer 1

使用onSelectedItemObjectsChange而不是onSelectedItemChange。

<MultiSelect
    ...
    onSelectedItemObjectsChange={this.onSelectedItemObjectsChange}
    ... />

这样，您将收到整个对象，而不仅仅是 key ，因此您将能够检索您的 name 属性。

onSelectedItemObjectsChange = selectedItems => {
  console.log(selectedItems); // should display [{id: '92iijs7yta', name: 'Ondo'}, ...]
};

参见the documentation供引用。