Ссылка на код: https://github.com/vi519/ToDo-List-React
Размещенная ссылка: https://vi519.github.io/ToDo-List-React/
Предпосылки:
- Узел Js установлен
Примечание. Полный код вы найдете в последней части этого блога.
Шаг 1:
Откройте командную строку:
Сначала создайте реактивный проект:
npx create-реагировать на приложение ‹project_name›
теперь откройте проект в вашей любимой среде IDE, так что мой код VS:
так что просто сделайте это:
компакт-диск ‹имя_проекта›
Шаг 2:
Код и объяснение (код Js):
const [список, setList] = useState([]);
const [inputValue, setInputValue] = useState();
Мы создали две переменные и соответствующие им функции для изменения состояния в соответствии с нашими потребностями.
теперь код HTML
‹тип ввода=”текст” onChange={(e) =› setInputValue(e.target.value)} /›‹button onClick={handleSubmit}›Добавить‹/button›
Вы можете видеть, что в приведенном выше коде есть две функции: одна — setInputValue, которая получает значение из поля ввода и устанавливает его в inputValue, а другая функция — handleSubmit.
функция handleSubmit() {
setList((oldItems) =› {return […oldItems, inputValue]});
}
В этой функции «oldItems» является начальным значением списка, мы возвращаем setState со старыми и новыми значениями.
Теперь мы повторяем список с помощью функции карты:
{list.map((item) =› (
‹›‹h1›{элемент}‹/h1›
))}
Функция карты перебирает элемент, присутствующий в списке
Выход:
Теперь очередь за функцией удаления
функция handleDelete (элемент) {
const newValues = list.filter((i) =› i != item);
УстановитьСписок (новые значения);
}
В этой функции handleDelete мы используем параметры как элемент, который соответственно указывает на элемент списка.
{list.map((item) =› (‹›‹h1›{item}‹/h1›‹button onClick={(e) =› handleDelete(item)}›delete‹/button›
</>))}
Полный код:
импортировать {useState} из «реагировать»;
приложение функции () {
const [список, setList] = useState([]);
const [inputValue, setInputValue] = useState();
функция handleSubmit () {
setList((oldItems) => {
вернуть […oldItems, inputValue];
});
}
функция handleDelete (элемент) {
console.log («имя элемента», элемент);
const newValues = list.filter((i) =› i != item);
установить список (новые значения);}
возвращаться (
‹div className="Приложение"›
‹h1›Список дел‹/h1›
‹тип ввода=”текст” onChange={(e) =› setInputValue(e.target.value)} /›
‹button onClick={handleSubmit}›Добавить‹/button›
{list.map((item) =› (
<>
‹h1›{элемент}‹/h1›
‹button onClick={(e) =› handleDelete(item)}›delete‹/button›‹/›))}
‹/дел›);}
экспортировать приложение по умолчанию;