Блог

Главная - Вопросы по программированию - Удалите элемент списка дел с помощью React

Удалите элемент списка дел с помощью React

#javascript #reactjs

Вопрос:

Поэтому я все еще учусь реагировать и пытаюсь использовать его для удаления элемента из «списка дел». Вот код:

 import { Item } from '../../types/item';
import { useState } from 'react';


type Props = {
  item: Item
}

export const ListItem = ({ item }: Props) => {
  const [isChecked, setIsChecked] = useState(item.done);

  return (
    <C.Container done={isChecked}>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={e => setIsChecked(e.target.checked)}
        />

        <button onClick={removeItem}><img src="./remove"/></button>
      <label>{item.name}</label>
    </C.Container>
  );
}

Эта кнопка должна вызвать функцию removeItem, которая будет… удалите этот предмет, ха-ха.
Есть какие-нибудь предложения?

Комментарии:

1. родительский компонент должен будет определить эту логику и передать функцию removeItem, если вы не используете более продвинутую систему управления состоянием, такую как useContext, recoil или redux

Ответ №1:

Я предлагаю вам использовать функциональный компонент с useState hook. Создайте состояние, начальное значение которого будет пустым массивом. затем создайте функцию, которая по щелчку мыши обновит значение в состоянии, это можно сделать с помощью useState hook. Просто введите setTodo(). Это создаст новую запись в вашем штате. Вы можете использовать методы массива для добавления возвращаемого значения из функции, которая запускается при нажатии, также удалите запись, просто используйте метод фильтра, вы можете подробнее узнать об этом в w3school, он предоставляет хорошие примеры, которые легко понять разработчикам.

Метки: