react使用组件写todolist
时间: 2023-08-06 16:07:06 浏览: 52
好的,下面是一个简单的React TodoList组件,包含添加、删除和完成任务的功能:
```jsx
import React, { useState } from "react";
const TodoList = () => {
const [inputValue, setInputValue] = useState("");
const [todos, setTodos] = useState([]);
const handleInputChange = (e) => setInputValue(e.target.value);
const handleAddTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue("");
}
};
const handleDeleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};
const handleCompleteTodo = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
return (
<div>
<input value={inputValue} onChange={handleInputChange} />
<button onClick={handleAddTodo}>Add</button>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
style={{ textDecoration: todo.completed ? "line-through" : "" }}
onClick={() => handleCompleteTodo(todo.id)}
>
{todo.text}
</span>
<button onClick={() => handleDeleteTodo(todo.id)}>X</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
```
这个组件包含一个输入框和添加按钮,用于添加新的任务。任务列表中的每个任务都可以被标记为已完成或删除。在任务列表中,已完成的任务会被添加一个删除线。