在React Native中的Multi Select中的PreSelectItems

时间:2019-10-10 05:49:05

标签: reactjs react-native

我如何使用React-naitve-select-two预先选择react native multi select中的项目,这是github链接https://github.com/xuho/react-native-select-two

问题是

假设我在multiselect内有数组列表,然后我从该列表中选择了两到三个项,然后我调用了保存数据API,然后再次想在那时编辑或选择更多项或删除一些项打开该屏幕,我得到了选定项目的响应,但是我无法使用此代码设置该数据

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import Select2 from "react-native-select-two";

const mockData = [
  { id: 1, name: "React Native Developer" },
  { id: 2, name: "Android Developer" },
  { id: 3, name: "iOS Developer" },
  { id: 4, name: "FullStack Developer" },
  { id: 5, name: "MeanStack Developer" },
  { id: 6, name: "Hybrid Developer" },
  { id: 7, name: "Ionic Developer" },
  { id: 8, name: "Neta Developer" },
  { id: 9, name: "Outgrow Developer" }
];

// create a component
export default class CreateNewAppointment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      autoSelectItem: [2]
    };
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Select2
          style={{ borderRadius: 5 }}
          colorTheme={"red"}
          popupTitle="Select item"
          title="Select item"
          data={mockData}
          preSelectedItem={this.state.autoSelectItem}
          onSelect={data => {
            this.setState({ data });
          }}
          onRemoveItem={data => {
            this.setState({ data });
          }}
        />
      </View>
    );
  }
}

0 个答案:

没有答案