有人可以帮忙实现从FlatList删除项目的方法。我正在尝试制作待办事项

Posted 2021-05-03

我不确定如何在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);
  });
};

希望这对您有所帮助。随时提出疑问。