反应本机从平面列表中删除项目并在警报中确认

Question

我正在尝试从 flatlist 中删除一个项目，但在删除它之前有一个警告询问“你确定要删除它吗”。

但我不知道该怎么做。

这是警报

<AwesomeAlert
        show={showAlert}
        title="UYARI!"
        message="Are you sure to remove it?"
        closeOnTouchOutside={false}
        closeOnHardwareBackPress={false}
        showCancelButton={true}
        showConfirmButton={true}
        cancelText="Hayır"
        confirmText="Evet"
        confirmButtonColor="#DD5555"
        onCancelPressed={() => {
          setShowAlert(false);
        }}
        onConfirmPressed={() => {
          //what should i do here ? 
          setShowAlert(false);
        }}
      />

这是平面列表渲染项目

const barcodeList = barcodeArray => {
    return (
      <View style={styles.ListItemContainer}>
        <Text>-{barcodeArray.item}</Text>
        <TouchableOpacity onPress={() => removeItem(barcodeArray.item)}> 
                                //this removeItem func is remove it without confirmation
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>X</Text>
        </TouchableOpacity>
      </View>
    );
  };

Answer 1

根据传递给 removeItem 函数的项目，您可以过滤掉值，然后设置状态。

例

let filter_elements = item.filter(
item => item.id!= barcodeArray.item.id
);
setState(filter_elements)

Answer 2

实际上您的警报组件应该 return 一个承诺。

类似的东西：

const removeItem = id => {
    alert("Are you sure?").then(if(value === "Yes") => {
        // do some stuff here

        
    })
}

您可以编写异步警报。

Can React native Alert wait for user response?

反应本机从平面列表中删除项目并在警报中确认

react native remove item from flatlist with confirmation in alert

alert

react-native

react-native-flatlist