在反应本机多选中设置所选项目答案

【问题标题】：Set Selected items in react native multi select在反应本机多选中设置所选项目
【发布时间】：2019-10-09 10:08:58
【问题描述】：

我想选择我已经选择并保存在后端的选定项目，如果我得到响应然后设置已经选择了我在反应原生多选中设置的那些项目这是我的反应原生多选代码

//Example Multiple select / Dropdown / Picker in React Native
import React, { Component } from "react";
//Import React
import { View, Text, Picker, StyleSheet, SafeAreaView } from "react-native";
//Import basic react native components
import MultiSelect from "react-native-multiple-select";
//Import MultiSelect library

//Dummy Data for the MutiSelect
this.items = [
  { id: "1", name: "America" },
  { id: "2", name: "Argentina" },
  { id: "3", name: "Armenia" },
  { id: "4", name: "Australia" },
  { id: "5", name: "Austria" },
  { id: "6", name: "Azerbaijan" },
  { id: "7", name: "Argentina" },
  { id: "8", name: "Belarus" },
  { id: "9", name: "Belgium" },
  { id: "10", name: "Brazil" }
];

export default class App extends Component {
  state = {
    //We will store selected item in this
    selectedItems: [
      { id: "1", name: "America" },
      { id: "2", name: "Argentina" },
      { id: "3", name: "Armenia" },
      { id: "4", name: "Australia" }
    ]
  };

  onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
    //Set Selected Items
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, padding: 30 }}>
          <MultiSelect
            hideTags
            items={items}
            uniqueKey="id"
            ref={component => {
              this.multiSelect = component;
            }}
            onSelectedItemsChange={this.onSelectedItemsChange}
            selectedItems={selectedItems}
            selectText="Pick Items"
            searchInputPlaceholderText="Search Items..."
            onChangeInput={text => console.log(text)}
            tagRemoveIconColor="#CCC"
            tagBorderColor="#CCC"
            tagTextColor="#CCC"
            selectedItemTextColor="#CCC"
            selectedItemIconColor="#CCC"
            itemTextColor="#000"
            displayKey="name"
            searchInputStyle={{ color: "#CCC" }}
            submitButtonColor="#48d22b"
            submitButtonText="Submit"
          />

          <View>
            {this.multiSelect &&
              this.multiSelect.getSelectedItemsExt(selectedItems)}
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

【问题讨论】：

选中你已经选中的选中项是什么意思？
明确解释你的问题是什么？你的意思是，在 api 调用之后，如何使它选中的项目突出显示。？
假设我在多选中有数组列表，然后我从该列表中选择两到三个项目，然后我调用保存数据 API，然后我想再次编辑或选择更多项目或删除一些项目那个时候，当我打开那个屏幕时，我得到了所选项目的响应，但我无法设置问题所在的数据

标签： react-native

【解决方案1】：

知道了。

this.state={
  selectedData: "158" // list of id here(without space, that is your response of api)
};

 <MultiSelect          
     .....
     .....
     selectedItems={selectedData}
 />
 <View>
     {this.multiselect ? this.multiSelect.getSelectedItemsExt(selectedData): null}
 </View>

【讨论】：

我为那个数组字符串问题做了什么
也是，列表中的项目被选中但未显示在此 {this.multiselect ? this.multiSelect.getSelectedItemsExt(selectedData): null}
我的 API 响应也在数组中，那么我该如何获取字符串
首先从像[1,2,3,4,5,6,7]这样的数组中取出所有id，然后将这些id数组转换为字符串并删除逗号。

【解决方案2】：

我遇到了同样的问题，我想出了如何通过使用部分接受的答案来预设选择。我了解到 selectedItems 是在 MultipleSelect 道具中设置为 uniqueKey 的任何内容的列表。

例如，如果您将 uniqueKey 作为每个列表成员的编号 id，并且您希望第二个成员集被选中，那么您将 selectedItems = {[ "2" ]}

我希望这是有道理的。

【讨论】：