Question

我使用数组在本地存储了该值，并且我想使用垃圾箱图标删除单个项目。但我需要从数组中删除多选项。

所以我放置了“删除所选”按钮。但是我无法选择多个项目，也不知道如何编写删除多个项目的功能。我是 React Native 的新手，请提供帮助。

这是我的代码

import React, { Component } from "react"
import { View, Text, TouchableOpacity, TouchableHighlight, TextInput, StyleSheet, FlatList,onRemove } from 'react-native'
import {Card,CardItem,Right} from 'native-base';
import Swipeout from 'react-native-swipeout'
import Icon from 'react-native-vector-icons/FontAwesome';
import MultiSelect from 'react-native-multiple-select';

class Screen3 extends Component{
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          firstname:[],
          onPress:true,
          unique1:[],
          unique:[],
          selectedItems : [],
          renderData:item,
          key1:0
          
        };
      }




    
      componentDidMount=()=>{
        const{navigation}=this.props
        const data=navigation.getParam('data','')
        const unique=data.filter((value,index,self)=>self.indexOf(value)===index)
        var key=0
        const unique1=[]
        for(var i=0;i<unique.length;i++){    
          key=key+1
          var result={"name":unique[i],"key":key}
          this.state.unique1.push(result)
          this.state.key1=this.state.key1+1
          this.setState({key1:this.state.key1})
          
    
        }
        
      }

      onPressHandler(item) {
        let renderData=[...this.state.renderData];
        for(let data of renderData){
          if(data.item==item){
            data.selected=(data.selected==null)?true:!data.selected;
            break;
          }
        }
        this.setState({renderData});
      }

      deleteItem = (item,index) => {
        console.log(item.name,index)
          this.state.unique=this.state.unique1
          let filtered=this.state.unique.filter((item1) => item1.key !== item.key)
          console.log(filtered)
          this.setState({unique1:filtered})

      }
   
  render(){
    return (
      





    <View>
    <Text style={styles.heading}>
        Manage Screen





  </Text>
  <TouchableOpacity style = {styles.Button}
               onPress={()=>this.deleteItem(item,index) } >
               
            <Text style={styles.button}>Delete selected</Text>        
            </TouchableOpacity> 


  <FlatList
  data={this.state.unique1}
  showsVerticalScrollIndicator={false}
  extraData={this.state.key1}
  style={{ marginTop: 16 }}
  renderItem={({ item, index }) => (
                            // <TouchableOpacity onPress={() => this.handleData(item)}>
  <TouchableOpacity onPress={() => this.onPressHandler(item,index)}>
  item!=null? 




  
 <Card
  style={{
    
            elevation: 10,

             marginBottom: 15,
   }}
  >




        <View style={{ flex: 1 }}></View>
    <CardItem bordered >
    style={
                  item.selected==true
                    ? {
                        padding: 10,
                        borderRadius: 5,
                        backgroundColor: '#000000',
                      }
                    : {
                        borderRadius: 5,
                        backgroundColor: '#a1a1a1',
                      }}
    <Text>{item.name}</Text>
    <Right style={{alignSelf:'flex-end' } }>
    <TouchableOpacity onPress={() => this.deleteItem(item,index)}>
    <Icon size={25} name={Platform.OS ==='android' ? "trash" : "ios-trash"} color="red"/>
    </TouchableOpacity>
    </Right>
    
    </CardItem>
    </Card>:null
     // </TouchableOpacity>
     )
      }
    />
    
     </View>

     )
   }
}


export default Screen3

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',





      },
      heading: {
        fontSize: 23,
        paddingVertical:80,
        textAlign: 'center',
        marginBottom: 30,
        marginTop: -40,

      },
      button:{
        width:('39%'),
        height:('4%'),
        alignItems:'center',
        borderWidth:1,
        borderRadius:2,
        marginTop:-80,
        marginHorizontal:10,
        marginLeft:110,
        justifyContent:'center',
        backgroundColor: '#b0c4de',
        padding: 9,
        fontSize: 15,
        margin: 15,
        height: 40,
        width: 160,
        alignItems: 'center'
      }
    }
)

Answer 1

您需要一个不同的函数来删除多个项目，并且该函数会调用您的 deleteItem() 函数。一种简单但效率不高的方法是遍历 selectedItems 并在数据数组中找到它们，然后使用 deleteItem() 删除每个选定的项目。如果效率不够高，您可以从那里改进。

反应本机多选并从状态数组中删除项目

1 个答案: