Ссылка на код: https://github.com/vi519/ToDo-List-React

Размещенная ссылка: https://vi519.github.io/ToDo-List-React/

Предпосылки:

  1. Узел 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›‹/›))}

‹/дел›);}

экспортировать приложение по умолчанию;