Как реализовать способ удаления элемента из FlatList? - PullRequest
Новая
       8

Как реализовать способ удаления элемента из FlatList?

1 голос
/ 25 января 2020

Я не уверен, как добавить функцию удаления в 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>
  );
}

1 Ответ

0 голосов
/ 25 января 2020

Вам просто нужно немного изменить свой код, чтобы обработать кнопку удаления. Поскольку у вас уже есть функция удаления, вызывайте эту функцию, когда нажимаете кнопку удаления. Вот и все. 

<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);
  });
};

Надеюсь, это вам поможет. Не стесняйтесь сомнений.

...