react实现添加编辑功能

实现添加和编辑功能的React组件

在React中实现添加和编辑功能通常需要状态管理、表单处理和条件渲染。以下是一个完整的实现方案：

状态管理

使用useState管理表单数据和编辑状态

const [formData, setFormData] = useState({
  id: '',
  name: '',
  email: ''
});
const [isEditing, setIsEditing] = useState(false);
const [items, setItems] = useState([]);

表单处理函数

创建通用的输入变更处理函数

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData({
    ...formData,
    [name]: value
  });
};

提交处理

处理表单提交，区分添加和编辑模式

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

  if(isEditing) {
    setItems(items.map(item => 
      item.id === formData.id ? formData : item
    ));
  } else {
    setItems([...items, {
      ...formData,
      id: Date.now()
    }]);
  }

  resetForm();
};

编辑功能实现

设置编辑状态并填充表单数据

const handleEdit = (item) => {
  setIsEditing(true);
  setFormData(item);
};

取消编辑

const handleCancel = () => {
  setIsEditing(false);
  resetForm();
};

const resetForm = () => {
  setFormData({
    id: '',
    name: '',
    email: ''
  });
};

表单组件

<form onSubmit={handleSubmit}>
  <input
    name="name"
    value={formData.name}
    onChange={handleInputChange}
    placeholder="Name"
  />
  <input
    name="email"
    value={formData.email}
    onChange={handleInputChange}
    placeholder="Email"
  />

  <button type="submit">
    {isEditing ? 'Update' : 'Add'}
  </button>

  {isEditing && (
    <button type="button" onClick={handleCancel}>
      Cancel
    </button>
  )}
</form>

列表渲染

<ul>
  {items.map(item => (
    <li key={item.id}>
      {item.name} - {item.email}
      <button onClick={() => handleEdit(item)}>
        Edit
      </button>
    </li>
  ))}
</ul>

完整组件示例

import React, { useState } from 'react';

function ItemManager() {
  const [formData, setFormData] = useState({
    id: '',
    name: '',
    email: ''
  });
  const [isEditing, setIsEditing] = useState(false);
  const [items, setItems] = useState([]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

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

    if(isEditing) {
      setItems(items.map(item => 
        item.id === formData.id ? formData : item
      ));
    } else {
      setItems([...items, {
        ...formData,
        id: Date.now()
      }]);
    }

    resetForm();
  };

  const handleEdit = (item) => {
    setIsEditing(true);
    setFormData(item);
  };

  const handleCancel = () => {
    setIsEditing(false);
    resetForm();
  };

  const resetForm = () => {
    setFormData({
      id: '',
      name: '',
      email: ''
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          placeholder="Name"
        />
        <input
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          placeholder="Email"
        />

        <button type="submit">
          {isEditing ? 'Update' : 'Add'}
        </button>

        {isEditing && (
          <button type="button" onClick={handleCancel}>
            Cancel
          </button>
        )}
      </form>

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

export default ItemManager;

使用Context优化状态管理

对于更复杂的应用，可以考虑使用Context或状态管理库

const ItemContext = React.createContext();

function ItemProvider({ children }) {
  const [items, setItems] = useState([]);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  const updateItem = (updatedItem) => {
    setItems(items.map(item => 
      item.id === updatedItem.id ? updatedItem : item
    ));
  };

  return (
    <ItemContext.Provider value={{ items, addItem, updateItem }}>
      {children}
    </ItemContext.Provider>
  );
}

使用自定义Hook封装逻辑

function useItemManager(initialItems = []) {
  const [items, setItems] = useState(initialItems);

  const addItem = (item) => {
    setItems([...items, { ...item, id: Date.now() }]);
  };

  const updateItem = (updatedItem) => {
    setItems(items.map(item => 
      item.id === updatedItem.id ? updatedItem : item
    ));
  };

  return { items, addItem, updateItem };
}