如何用react做增删
使用 React 实现增删功能
在 React 中实现增删功能通常涉及状态管理（如 useState 或 useReducer）和列表渲染。以下是具体实现方法：
初始化状态
定义一个状态变量来存储列表数据，例如待办事项或用户列表：
const [items, setItems] = useState([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]);添加功能
通过表单输入新数据并更新状态：
const addItem = (newItemText) => {
const newItem = {
id: Date.now(), // 使用时间戳作为唯一 ID
text: newItemText
};
setItems([...items, newItem]);
};删除功能
根据 ID 过滤掉要删除的项：
const deleteItem = (id) => {
setItems(items.filter(item => item.id !== id));
};完整组件示例
import React, { useState } from 'react';
function ItemList() {
const [items, setItems] = useState([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]);
const [inputValue, setInputValue] = useState('');
const addItem = () => {
if (!inputValue.trim()) return;
const newItem = {
id: Date.now(),
text: inputValue
};
setItems([...items, newItem]);
setInputValue('');
};
const deleteItem = (id) => {
setItems(items.filter(item => item.id !== id));
};
return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Enter new item"
/>
<button onClick={addItem}>Add</button>
<ul>
{items.map(item => (
<li key={item.id}>
{item.text}
<button onClick={() => deleteItem(item.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
}关键注意事项
- 为列表项添加唯一的
key属性（如item.id），帮助 React 高效更新 DOM。 - 状态更新应使用不可变数据（如展开运算符
...或filter）。 - 对于复杂状态逻辑，可考虑使用
useReducer替代useState。
扩展功能
- 添加编辑功能：通过状态记录当前编辑的项，并更新对应内容。
- 使用 Context 或状态管理库（如 Redux）跨组件共享状态。
- 添加本地存储（localStorage）持久化数据。
以上方法适用于大多数 React 应用场景，可根据具体需求调整实现细节。
