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

时间:2019-12-11 15:34:34

标签: javascript reactjs react-native expo

Am使用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
  };

1 个答案:

答案 0 :(得分:0)

使用onSelectedItemObjectsChange代替onSelectedItemChange

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

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

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

请参阅the documentation以供参考。