写一个react的todolist
时间: 2023-02-20 22:58:18 浏览: 62
我可以给你写一个简单的React TodoList:
import React from 'react';
const TodoList = () => {
const [todos, setTodos] = React.useState([]);
const addTodo = (todo) => {
setTodos([...todos, todo]);
};
const removeTodo = (index) => {
let newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => removeTodo(index)}>X</button>
</li>
))}
</ul>
<input type="text" onChange={(e) => addTodo(e.target.value)} />
</div>
);
};
export default TodoList;
相关问题
写一个todolist react
好的,下面是一个简单的todolist React组件的实现:
```jsx
import React, { useState } from "react";
function TodoList() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState("");
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleAddTodo = () => {
if (inputValue.trim() !== "") {
setTodos([...todos, inputValue]);
setInputValue("");
}
};
const handleRemoveTodo = (index) => {
setTodos(todos.filter((_, i) => i !== index));
};
return (
<div>
<h1>Todo List</h1>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button onClick={handleAddTodo}>Add</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => handleRemoveTodo(index)}>x</button>
</li>
))}
</ul>
</div>
);
}
export default TodoList;
```
这个组件中,我们使用了`useState`钩子函数来管理组件的状态。我们使用了两个状态变量:`todos`表示待办事项列表,`inputValue`表示输入框的值。我们使用`handleInputChange`函数在输入框值变化时更新`inputValue`的值。使用`handleAddTodo`函数来添加新的待办事项。当点击“Add”按钮时,我们将`inputValue`的值添加到`todos`列表中,并清空输入框的值。使用`handleRemoveTodo`函数来移除待办事项。当点击待办事项后面的“x”按钮时,我们将该待办事项从`todos`列表中移除。最后,我们使用`map`函数遍历`todos`列表,并将每个待办事项渲染成一个列表项。
使用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;
```
这个组件包含一个输入框和添加按钮,用于添加新的任务。任务列表分为两个部分:未完成的任务和已完成的任务。任务可以被删除或标记为已完成。还有三个按钮,用于切换任务列表的显示模式:显示所有任务、只显示未完成的任务、只显示已完成的任务。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)