当前位置：首页 > React

实现增删react

2026-01-26 12:01:22React

在 React 中实现增删操作

1. 创建状态管理 使用 useState 钩子管理数据列表和输入框状态。例如：

const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

2. 添加操作实现 通过状态更新函数将新项添加到列表：

const handleAdd = () => {
  if (inputValue.trim()) {
    setItems([...items, { id: Date.now(), text: inputValue }]);
    setInputValue('');
  }
};

3. 删除操作实现 通过过滤列表实现删除指定项：

const handleDelete = (id) => {
  setItems(items.filter(item => item.id !== id));
};

4. 渲染列表与交互 在组件中绑定事件并渲染列表：

return (
  <div>
    <input 
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
    <button onClick={handleAdd}>添加</button>
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.text}
          <button onClick={() => handleDelete(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  </div>
);

使用 useReducer 的进阶方案

对于复杂状态逻辑，可采用 useReducer：

1. 定义 reducer 函数

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return [...state, action.payload];
    case 'DELETE':
      return state.filter(item => item.id !== action.payload);
    default:
      return state;
  }
};

2. 初始化并派发动作

const [state, dispatch] = useReducer(reducer, []);

const handleAdd = () => {
  dispatch({
    type: 'ADD',
    payload: { id: Date.now(), text: inputValue }
  });
};

const handleDelete = (id) => {
  dispatch({ type: 'DELETE', payload: id });
};

性能优化建议

为列表项添加唯一 key 属性
复杂场景考虑使用 useMemo 或 useCallback 避免不必要的渲染
删除操作可添加确认对话框提升用户体验

完整组件示例

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAdd = () => {
    if (inputValue.trim()) {
      setItems([...items, { id: Date.now(), text: inputValue }]);
      setInputValue('');
    }
  };

  const handleDelete = (id) => {
    setItems(items.filter(item => item.id !== id));
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容"
      />
      <button onClick={handleAdd}>添加</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.text}
            <button onClick={() => handleDelete(item.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

实现增删react