javascript - 当我想删除列表中的一项时,一切都会被删除 Expo, React Native
问题描述
This is my app.js
我的应用程序的主体。... 导入反应,{ useState } 从“反应”;导入 { StyleSheet, Text, View, Button, TextInput, FlatList, } from "react-native"; 从“./components/GoalItem”导入 GoalItem;从“./components/GoalInput”导入目标输入;
export default function App() {
const [lifeGoals, setLifeGoals] = useState([]);
const addGoalHandler = (goalTitle) => {
setLifeGoals((currentGoals) => [
...currentGoals,
{ key: Math.random().toString(), value: goalTitle },
]);
};
const removeGoalHandler = (goalId) => {
setLifeGoals((currentGoals) => {
return currentGoals.filter((goal) => goal.id !== goalId);
});
};
return (
<View style={styles.Screen}>
<GoalInput onAddGoal={addGoalHandler} />
<FlatList
keyExtractor={(item, index) => item.id}
data={lifeGoals}
renderItem={(itemData) => (
<GoalItem
id={itemData.item.id}
onDelete={removeGoalHandler}
title={itemData.item.value}
/>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
Screen: {
padding: 50,
},
});
...
This is my GoalItem which houses my list
...
import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
const GoalItem = (props) => {
return (
<TouchableOpacity onPress={props.onDelete.bind(this, props.id)}>
<View style={styles.ListItem}>
<Text>{props.title}</Text>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
ListItem: {
padding: 10,
marginVertical: 10,
backgroundColor: "#CCFFFF",
borderRadius: 15,
},
});
export default GoalItem;
...
This is my GoalInput which handles the userinput and appending onto the list
...
import React, { useState } from "react";
import { View, TextInput, Button, Stylesheet, StyleSheet } from "react-native";
const GoalInput = (props) => {
const [enteredGoal, setEnteredGoal] = useState("");
const InputGoalHandler = (enteredText) => {
setEnteredGoal(enteredText);
};
return (
<View style={styles.inputContainer}>
<TextInput
placeholder="Enter Task Here"
style={styles.InputBox}
onChangeText={InputGoalHandler}
value={enteredGoal}
/>
<Button title="add" onPress={props.onAddGoal.bind(this, enteredGoal)} />
</View>
);
};
const styles = StyleSheet.create({
InputBox: {
borderColor: "black",
borderWidth: 0,
padding: 10,
width: "80%",
},
inputContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
});
export default GoalInput;
...我相信关键可能是问题,但我真的不确定。应该发生的是,当您单击列表中的某个项目时,它应该被删除,但是它正在删除我的整个列表。我该如何解决这个问题?
解决方案
const removeGoalHandler = (goalId) => {
setLifeGoals(lifeGoals.filter((m) => m.id !== goalId.id));
};
<FlatList
keyExtractor={(item) => item.id}
data={lifeGoals}
renderItem={(itemData) => (
<GoalItem
onDelete={removeGoalHandler}
title={itemData.item.value}
/>
)}
/>
const GoalItem = ({onDelete, title}) => {
return (
<TouchableOpacity onPress={onDelete}>
<View style={styles.ListItem}>
<Text>{title}</Text>
</View>
</TouchableOpacity>
);
};
尝试这个
推荐阅读
- php - 使用新的缩略图 PHP 设置 Woocommerce 产品缩略图
- jquery - 遍历 each() 循环中每个项目的子项目
- html - 如何使它在 iphone 上特别响应这个页面?
- c# - 如何使用 xamarin 表单在 Geojson 图层中设置线条颜色
- mysql - 仅使用来自 TIMESTAMP SQL 的日期
- android - 关闭登录菜单后如何在 SharedPreferences 中保存数据?
- mysql - 针对没有资产的 PM 的 Maximo 特殊查询
- css - CSS 样式 POSITION 对 HTML 元素有什么作用?
- swift - 将 UIImageView 添加到 UIScrollView 以编程方式缩放图像
- neo4j - Neo4j count() 返回不正确的值