Question

我正在使用多个选择列表来响应本机。它是“反应-本机-分段-多选”。

我用它来输入数据以形成表格。使用选择列表插入数据时，它可以正常工作。没问题。现在，我需要编辑表格。因此，当我加载表单时，它不会将所选项目加载到选择列表中。我使用onSelectedItemsChange加载数据。但是，我遇到了错误。如果我使用按钮调用该函数，则不会自动调用该函数，而是加载选定的项目。但是，我无需手动单击按钮即可完成操作。

这是我关于多项选择的代码。

             <SectionedMultiSelect
                  items={this.state.items}
                  uniqueKey="id"
                  subKey="subItem"
                  selectText="Select"
                  confirmText="Select"
                  searchPlaceholderText="Search"
                  removeAllText="Clear all"
                  showDropDowns={true}
                  readOnlyHeadings={true}
                  showCancelButton={true}
                  showRemoveAll={true}
                  onSelectedItemsChange={this.onSelectedItemsChange}
                  selectedItems={this.state.selectedItems}


onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems});
};

当我尝试自动设置selectedItems的状态时，它给出了错误。但是，如果我通过按下按钮来设置selectedItems的状态，它将起作用并显示选定的项目。

在这种情况下有人可以帮助我吗？

https://github.com/renrizzolo/react-native-sectioned-multi-select

onSelectedItemsChange

Answer 1

您需要将项目保存在异步存储中。编辑表单时，获取项目存储并将其添加到selectedItems数组中。

例如

storage.js

// create function for saving items to storage
export const SaveItem = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
    console.log('saved');
  } catch (e) {
    console.log(e);
  }
};

// create function for saving items to storage
export const ReadItem = async key => {
  try {
    var result = await AsyncStorage.getItem(key);
    return result;
  } catch (e) {
    return e;
  }
};

，并使用功能以每个表格名称为键来读取和保存数据。像SaveItem('form1', [23,34,45])。将功能导入组件中。

import { SaveItem, ReadItem } from './storage';

// get items for a form
editForm = key => {
  ReadItem(key).then(res => {
    const selected = JSON.parse(result);

    this.setState({
      selectedItems: selected
    });
  });
};

// save form data using each forms name 
saveItems = (key, value) => {
  const items = JSON.stringify(value);

  SaveItem(key, items)
    .then(res => {
      console.log('saved', res);
    })
    .catch(e => console.warn(e));
};

如何在本机部分多选中预选项目？

1 个答案: