React实现简单管理列表 内容表格展现 要有删除和修改功能

下面是一个使用React实现简单管理列表的示例代码，其中包括内容表格展示、删除和修改功能：

首先，创建一个ManagementList组件：

import React, { useState } from 'react';

const ManagementList = () => {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');
  const [editingIndex, setEditingIndex] = useState(-1);
  const [editedItem, setEditedItem] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (editingIndex === -1) {
      setItems([...items, newItem]);
    } else {
      const updatedItems = [...items];
      updatedItems[editingIndex] = editedItem;
      setItems(updatedItems);
      setEditingIndex(-1);
      setEditedItem('');
    }
    setNewItem('');
  };

  const handleDelete = (index) => {
    const updatedItems = [...items];
    updatedItems.splice(index, 1);
    setItems(updatedItems);
  };

  const handleEdit = (index) => {
    setEditingIndex(index);
    setEditedItem(items[index]);
  };

  return (
    <div>
      <h2>管理列表</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{item}</td>
              <td>
                <button onClick={() => handleDelete(index)}>删除</button>
                <button onClick={() => handleEdit(index)}>修改</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={editingIndex === -1 ? newItem : editedItem}
          onChange={(e) => {
            if (editingIndex === -1) {
              setNewItem(e.target.value);
            } else {
              setEditedItem(e.target.value);
            }
          }}
        />
        <button type="submit">
          {editingIndex === -1 ? '添加' : '保存'}
        </button>
      </form>
    </div>
  );
};

export default ManagementList;

然后，在你的主组件中使用ManagementList组件：

import React from 'react';
import ManagementList from './ManagementList';

const App = () => {
  return (
    <div>
      <h1>简单管理列表</h1>
      <ManagementList />
    </div>
  );
};

export default App;

这样，你就可以在App组件中渲染ManagementList组件，并且可以在表格中展示内容、删除和修改列表项。

请注意，这只是一个简单的示例，没有使用任何数据持久化或复杂的状态管理。在实际的应用中，你可能需要使用更高级的状态管理库，如Redux或Mobx，并且与后端API交互来实现完整的管理列表功能。