用react做表格增删改实现将数据列表抽离成一个单独的组件 ,将添加表单所在模态框抽离成一个单独的组件实现的代码

好的，下面是用React实现表格增删改并将数据列表和添加表单抽离成单独组件的代码示例：

import React, { useState } from "react";

// 表格组件
function Table(props) {
  const { data, onDelete, onEdit } = props;

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>{item.address}</td>
            <td>
              <button onClick={() => onDelete(index)}>Delete</button>
              <button onClick={() => onEdit(index)}>Edit</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 添加表单组件
function AddForm(props) {
  const { onClose, onSubmit } = props;
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  const [address, setAddress] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit({ name, age, address });
    setName("");
    setAge("");
    setAddress("");
    onClose();
  };

  return (
    <div>
      <h2>Add New Item</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={name}
            onChange={(event) => setName(event.target.value)}
          />
        </label>
        <label>
          Age:
          <input
            type="number"
            value={age}
            onChange={(event) => setAge(event.target.value)}
          />
        </label>
        <label>
          Address:
          <input
            type="text"
            value={address}
            onChange={(event) => setAddress(event.target.value)}
          />
        </label>
        <button type="submit">Add Item</button>
        <button onClick={onClose}>Cancel</button>
      </form>
    </div>
  );
}

// 数据列表组件
function DataList(props) {
  const [showAddForm, setShowAddForm] = useState(false);
  const [editIndex, setEditIndex] = useState(-1);
  const [data, setData] = useState([
    { name: "Alice", age: 20, address: "123 Main St" },
    { name: "Bob", age: 30, address: "456 Elm St" },
  ]);

  const handleAddClick = () => {
    setShowAddForm(true);
  };

  const handleAddSubmit = (item) => {
    if (editIndex === -1) {
      setData([...data, item]);
    } else {
      setData([
        ...data.slice(0, editIndex),
        item,
        ...data.slice(editIndex + 1),
      ]);
      setEditIndex(-1);
    }
  };

  const handleDeleteClick = (index) => {
    setData([...data.slice(0, index), ...data.slice(index + 1)]);
  };

  const handleEditClick = (index) => {
    setEditIndex(index);
    setShowAddForm(true);
  };

  const handleAddClose = () => {
    setShowAddForm(false);
    setEditIndex(-1);
  };

  return (
    <div>
      <h1>Data List</h1>
      <button onClick={handleAddClick}>Add Item</button>
      <Table data={data} onDelete={handleDeleteClick} onEdit={handleEditClick} />
      {showAddForm && (
        <AddForm
          onSubmit={handleAddSubmit}
          onClose={handleAddClose}
          initialData={editIndex === -1 ? null : data[editIndex]}
        />
      )}
    </div>
  );
}

export default DataList;

这段代码中，我们首先定义了一个表格组件，它接收一个数据数组和删除/编辑数据的回调函数作为props，并将数据渲染为表格。接着，我们定义了一个添加表单组件，它包含用于输入新数据的输入框和一个“提交”按钮。最后，我们定义了一个数据列表组件，它包含一个用于添加数据的按钮、一个用于展示数据的表格组件和一个用于添加新数据的模态框组件。在这个组件中，我们使用useState钩子来存储数据数组、是否展示模态框以及正在编辑的数据的索引。同时，我们还定义了一些用于处理用户交互的回调函数，例如添加数据、删除数据和编辑数据等。

在这段代码中，我们使用了React的组件化思想，将整个应用程序拆分成了多个小组件，使得代码更加模块化、可维护性更高。同时，我们还使用了useState钩子来管理组件内部的状态，这使得代码更加简洁、易于理解。