gpt4 book ai didi

javascript - 如何实现从 FlatList 中删除项目的方法?

转载 作者:行者123 更新时间:2023-11-28 03:13:15 25 4
gpt4 key购买 nike

我不知道如何在 FlatList 中添加删除功能。我知道我可以制作不同的组件,但我想知道如何在这个文件中完成它。我花了几个小时试图解决这个问题,但不知道该怎么做。

export default function test() {
const [enteredGoal, setEnteredGoal] = useState("");
const [courseGoals, setCourseGoals] = useState([]);


const goalInput = enteredText => {
setEnteredGoal(enteredText);
};

const addGoal = () => {
setCourseGoals(currentGoals => [
...currentGoals,
{ key: Math.random().toString(), value: enteredGoal }
]);

};

const removeGoal = goalId => {
setCourseGoals(currentGoals => {
return currentGoals.filter((goal) => goal.id !== goalId);
})
}

return (
<View style={styles.container}>
<View>
<TextInput
color="lime"
style={styles.placeholderStyle}
placeholder="Type here"
placeholderTextColor="lime"
onChangeText={goalInput}
value={enteredGoal}

/>
</View>
<FlatList
data={courseGoals}
renderItem={itemData => (
<View style={styles.listItem} >
<Text style={{ color: "lime" }}>{itemData.item.value}</Text>
</View>
)}
/>
<View>
<TouchableOpacity>
<Text style={styles.button} onPress={addGoal}>
Add
</Text>
</TouchableOpacity>
</View>
</View>
);
}

最佳答案

您只需要稍微修改一下代码即可处理删除按钮。由于您已经具有删除功能,因此当您单击删除按钮时调用该功能。就是这样。

<FlatList
data={courseGoals}
renderItem={itemData => (
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text style={{ color: "lime" }}>{itemData.item.value}</Text>
<TouchableOpacity onPress={() => removeGoal(itemData.item.key)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
)}
/>;

编辑
如下更改您的 removeGoal 函数

const removeGoal = goalId => {
setCourseGoals(courseGoals => {
return courseGoals.filter(goal => goal.key !== goalId);
});
};

希望这对您有帮助。如有疑问,请放心。

关于javascript - 如何实现从 FlatList 中删除项目的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59907433/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com