react-native-multiple-select 存储提交时选择的项目答案

【问题标题】：react-native-multiple-select storing items selected on submitreact-native-multiple-select 存储提交时选择的项目
【发布时间】：2018-12-21 02:10:34
【问题描述】：

我正在使用 react-native-multiple-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>

问题在于提交按钮。我只想记录用户按下提交后选择的项目。

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

任何帮助都会很棒。

【问题讨论】：

标签： arrays react-native multi-select

【解决方案1】：

您可以这样做来获得一个包含被选中项目对象的数组：

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

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

【讨论】：

实际上这是在选中每个复选框后的设置状态。如何仅在按下提交按钮后设置状态？
我也面临这个问题。有什么解决办法吗？

【解决方案2】：

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

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

【讨论】：

【解决方案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);

现在您返回您的多选标签添加

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

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

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

希望对某人有所帮助。

【讨论】：