已解决 - 单击时难以为映射数组列表中的每个项目创建特定的模态弹出窗口 - React Native

Question

我有一个菜单，我在其中为异步存储中的每个文件创建一个按钮列表，但是我正在努力找到一种方法来使"确认删除"弹出窗口出现在LongPress上。 我不知道如何创建一个基本的模态组件，我可以在地图中传递项目细节，这样当我长按特定文件时，会出现一个弹出窗口，让我可以选择删除按下的特定文件。

我不知道正确的方法是什么。 在这个阶段，我什至不知道如何使模态可见。 我尝试过：

这是我的地图：

{props.fileList.map((item) => {
return(
<TouchableOpacity 
key={item.id} 
style={styles.fileButton} 
onLongPress={() => deletePopupHandler(item)} 
onPress={() => loadFile(item)}>
<Text>
{item}
</Text>
</TouchableOpacity>
)
})}

我的删除弹出处理程序(我认为这是我犯错误的地方，我不知道如何正确地将项目信息从地图传递到 onLongPress 功能(：

const deletePopupHandler = (item) => {
console.log('indeletepopophandler')
deletePopupContent = <DeletePopup 
popupVisible={popupVisible} 
setPopupVisible={setPopupVisible}
item={item}
/>
setPopupVisible(true)
}

我的删除弹出窗口组件(还没有费心编写是按钮功能，因为我无法让模态显示项目细节(：

<Modal visible={props.popupVisible} transparent={true}>
<View style={styles.popupContainer}>
<View style={styles.popupWindow}>
<Text style={styles.message}>
Delete?
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.buttonYes}><Text>Yes</Text></TouchableOpacity>
<TouchableOpacity style={styles.buttonNo} onPress={() => props.setPopupVisible(false)}><Text>No</Text></TouchableOpacity>
</View>
</View>
</View>
</Modal>

然后我只是在应用程序返回函数中的变量 {deletePopupContent}

。谢谢

编辑 - 找到了解决方法，尽管下面的答案更好 所以我找到了一种方法，如果其他人遇到同样的事情，它可以工作。 我从组件中删除了模态，而是将模态包装在{deletePopupContent}周围。

所以组件更改为：

<View style={styles.popupContainer}>
<View style={styles.popupWindow}>
<Text style={styles.message}>
Delete?
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.buttonYes}><Text>Yes</Text></TouchableOpacity>
<TouchableOpacity style={styles.buttonNo} onPress={() => props.setPopupVisible(false)}><Text>No</Text></TouchableOpacity>
</View>
</View>
</View>

在我的应用程序返回中，我有：

<Modal visible={popupVisible}>
{deletePopupContent}
</Modal>

Answer 1

DeletePopup 必须是 DOM 的一部分才能显示。由于您使用 visible={props.popupVisible} 来控制其可见性，因此您可以将弹出窗口添加到主组件中。模态是否有效？ 您可以将 visible 设置为 true 进行验证。 在 删除弹出处理程序 中，可以将所选项保存到状态。用户确认后，删除保存的项目，否则将所选项目重置为 null。 检查我在这里制作的示例。https://codesandbox.io/s/awesome-williamson-v7tug?file=/src/App.js