Вот пример кода простого приложения со списком дел на React:
import React, { useState } from 'react';
function TodoList() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);
const handleInputChange = (event) => {
setTask(event.target.value);
};
const handleAddTask = () => {
if (task.trim() !== '') {
setTasks([...tasks, task]);
setTask('');
}
};
const handleDeleteTask = (index) => {
const newTasks = [...tasks];
newTasks.splice(index, 1);
setTasks(newTasks);
};
return (
<div>
<h2>Todo List</h2>
<input type="text" value={task} onChange={handleInputChange} />
<button onClick={handleAddTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleDeleteTask(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default TodoList;
Этот код устанавливает компонент TodoList
, используя синтаксис функциональных компонентов React. Он использует перехватчики React (useState
) для управления состоянием ввода задачи и списком задач. Функция handleInputChange
обновляет входное значение задачи при каждом его изменении, а handleAddTask
добавляет новую задачу в список при нажатии кнопки «Добавить задачу». Функция handleDeleteTask
удаляет задачу из списка при нажатии соответствующей кнопки «Удалить».