react-native-multiple-select 存储项目 select 提交

Question

我正在使用 react-native-multiple-select 并尝试创建一个下拉菜单，允许用户 select 多个选项，然后将他们 select 的选项记录到一个大批。目前，我的代码是：

    onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
    console.log('submit button was pressed')
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <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)}
          altFontFamily="ProximaNova-Light"
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />
        <View>

问题出在提交按钮上。我只想在用户按下提交后记录 selected 的项目。

目前它会记录每次 selected 新项目时按下按钮，这无助于将项目 selected 存储到另一个数组中。

任何帮助都会很棒。

Answer 1

您可以执行此操作以获取包含所选项目对象的数组：

for(var i = 0; i < selectedItems.length; i++){
this.state.selectedItemsArray.push(this.state.gasOptions[selectedItems[i]])
}
console.log(selectedItems);

这应该输出选择的项目数组，每个项目都包含唯一键和显示名称。

Answer 2

this.state.selectedItemsArray.push(listOfObject[0].id);

我注意到 selectedItemsArray 仅存储键，因此它是键数组而不是对象列表。因此，如果您的键是 id，您希望将其推送到数组而不是所有对象。

Answer 3

我以前遇到过同样的问题。现在我修好了。按照以下步骤操作：

转到node_modules/react-native-multi-select/index。d.ts 添加代码

onSubmitclick: ((items: any[]) => void), 内部导出接口 MultiSelectProps {}

转到lib/react-native-multi-select.js添加代码

onSubmitclick: PropTypes.func, 里面的静态 propTypes ={}

转到函数_submitSelection()并在其中添加代码

const {selectedItems, onSubmitclick } = this.props; onSubmitclick(selectedItems);

现在你return你的多选标签添加

onSubmitclick={(value1) => getSubmit(value1)}

使用此功能捕获您选择的值

const getSubmit = (value1) => { console.log('new submit value***', value1) }

希望对某人有所帮助。

react-native-multiple-select 存储项目 select 提交

react-native-multiple-select storing items selected on submit

arrays

multi-select

react-native