当前位置：首页 > React

react实现增删改

2026-01-26 19:31:14React

React 实现增删改功能

在 React 中实现增删改（CRUD）功能是常见的需求，通常通过状态管理和事件处理来完成。以下是具体实现方法：

状态初始化

使用 useState 初始化数据状态和管理表单输入：

const [items, setItems] = useState([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);
const [inputValue, setInputValue] = useState('');
const [editingId, setEditingId] = useState(null);

添加功能

通过表单提交事件将新项添加到状态数组：

const handleAdd = (e) => {
  e.preventDefault();
  if (!inputValue.trim()) return;

  const newItem = {
    id: Date.now(),
    name: inputValue
  };

  setItems([...items, newItem]);
  setInputValue('');
};

删除功能

通过过滤数组实现删除指定项：

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

更新功能

分两步实现：先设置编辑状态，再提交更新：

const handleEdit = (item) => {
  setEditingId(item.id);
  setInputValue(item.name);
};

const handleUpdate = (e) => {
  e.preventDefault();

  setItems(items.map(item => 
    item.id === editingId 
      ? { ...item, name: inputValue } 
      : item
  ));

  setEditingId(null);
  setInputValue('');
};

完整组件示例

function CrudExample() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
  ]);
  const [inputValue, setInputValue] = useState('');
  const [editingId, setEditingId] = useState(null);

  const handleAdd = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;

    const newItem = {
      id: Date.now(),
      name: inputValue
    };

    setItems([...items, newItem]);
    setInputValue('');
  };

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

  const handleEdit = (item) => {
    setEditingId(item.id);
    setInputValue(item.name);
  };

  const handleUpdate = (e) => {
    e.preventDefault();

    setItems(items.map(item => 
      item.id === editingId 
        ? { ...item, name: inputValue } 
        : item
    ));

    setEditingId(null);
    setInputValue('');
  };

  return (
    <div>
      <form onSubmit={editingId ? handleUpdate : handleAdd}>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button type="submit">
          {editingId ? 'Update' : 'Add'}
        </button>
      </form>

      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleEdit(item)}>Edit</button>
            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

使用 useReducer 管理复杂状态

对于更复杂的状态逻辑，可以使用 useReducer：

const initialState = {
  items: [],
  inputValue: '',
  editingId: null
};

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
        inputValue: ''
      };
    case 'DELETE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      };
    // 其他 case...
    default:
      return state;
  }
}

// 在组件中使用
const [state, dispatch] = useReducer(reducer, initialState);