從 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}
    ... />

這樣，您將收到整個對象，而不僅僅是鍵，因此，您將能夠檢索您的name屬性。

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

請參閱文檔以供參考。