react版本得todoList
时间: 2024-04-22 17:24:24 浏览: 20
React 版本的 ToDo List 可以使用 React 的组件化开发方式来实现。首先,你需要创建一个名为 `TodoList` 的 React 组件,它将包含待办事项列表并管理其状态。
```jsx
import React, { useState } from 'react';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
const removeTodo = (index) => {
const updatedTodos = todos.filter((_, i) => i !== index);
setTodos(updatedTodos);
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={addTodo}>Add</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => removeTodo(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
```
在上面的代码中,我们使用了 React 的 `useState` 钩子来创建了 `todos` 和 `inputValue` 两个状态。`todos` 用于存储待办事项列表,`inputValue` 用于获取输入框的值。
`addTodo` 函数用于将输入框的内容添加到 `todos` 列表中,并清空输入框的值。`removeTodo` 函数用于移除指定位置的待办事项。
在组件的返回部分,我们渲染了一个输入框、一个添加按钮和一个待办事项列表。通过 `map` 方法遍历 `todos` 列表,并为每一个待办事项创建一个包含删除按钮的列表项。
你可以将这个 `TodoList` 组件嵌入到你的 React 应用中,从而实现一个基本的 ToDo List 功能。