用react写删除功能
时间: 2023-03-12 14:51:44 浏览: 57
我可以给你一些参考资料,你可以用来学习如何在React中编写删除功能:https://www.tutorialspoint.com/reactjs/reactjs_deleting_components.htm、https://reactjs.org/docs/react-component.html#componentwillunmount。
相关问题
react使用组件写todolist
好的,下面是一个简单的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;
```
这个组件包含一个输入框和添加按钮,用于添加新的任务。任务列表中的每个任务都可以被标记为已完成或删除。在任务列表中,已完成的任务会被添加一个删除线。
使用react写一个todolist分组件
好的,下面是一个简单的React TodoList组件,包含添加、删除和完成任务的功能,以及任务分组的功能:
```jsx
import React, { useState } from "react";
const TodoList = () => {
const [inputValue, setInputValue] = useState("");
const [todos, setTodos] = useState([]);
const [completedTodos, setCompletedTodos] = useState([]);
const [activeTab, setActiveTab] = useState("all");
const handleInputChange = (e) => setInputValue(e.target.value);
const handleAddTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, { id: Date.now(), text: inputValue }]);
setInputValue("");
}
};
const handleDeleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
setCompletedTodos(completedTodos.filter((todo) => todo.id !== id));
};
const handleCompleteTodo = (id) => {
const todo = todos.find((todo) => todo.id === id);
setTodos(todos.filter((todo) => todo.id !== id));
setCompletedTodos([...completedTodos, todo]);
};
const handleTabClick = (tab) => setActiveTab(tab);
const getVisibleTodos = () => {
switch (activeTab) {
case "completed":
return completedTodos;
case "active":
return todos;
default:
return [...completedTodos, ...todos];
}
};
const visibleTodos = getVisibleTodos();
return (
<div>
<input value={inputValue} onChange={handleInputChange} />
<button onClick={handleAddTodo}>Add</button>
<ul>
{visibleTodos.map((todo) => (
<li key={todo.id}>
<span
style={{ textDecoration: todo.completed ? "line-through" : "" }}
onClick={() =>
todo.completed ? null : handleCompleteTodo(todo.id)
}
>
{todo.text}
</span>
<button onClick={() => handleDeleteTodo(todo.id)}>X</button>
</li>
))}
</ul>
<div>
<button onClick={() => handleTabClick("all")}>All</button>
<button onClick={() => handleTabClick("active")}>Active</button>
<button onClick={() => handleTabClick("completed")}>Completed</button>
</div>
</div>
);
};
export default TodoList;
```
这个组件包含一个输入框和添加按钮,用于添加新的任务。任务列表分为两个部分:未完成的任务和已完成的任务。任务可以被删除或标记为已完成。还有三个按钮,用于切换任务列表的显示模式:显示所有任务、只显示未完成的任务、只显示已完成的任务。