解决问题2023_4_11

问题描述：前端有父页面index，其包括一个import的子页面addCase，需求是在父页面上如果点击增加项目，直接调用子页面，如果在单个项目中点击编辑、复制，传入参数row作为行信息，调用子页面进行回显。

解决思路：在父页面index中定义一个状态showAddCase，默认为false，用来控制是否显示子页面addCase。
在父页面中定义一个函数toggleAddCase，用来切换showAddCase状态的值，从而控制是否显示子页面。
在父页面中定义一个函数editCase，用来处理编辑和复制事件。该函数接收一个参数row，代表当前要编辑或复制的行信息。该函数需要将row传递给子页面addCase，并将showAddCase状态设置为true。
在子页面addCase中，通过props获取父页面传递的row信息，用来回显表单数据。在子页面中定义一个函数handleSubmit，用来处理表单提交事件。该函数中需要将表单数据传递给父页面，从而实现数据的添加或修改。
在父页面中定义一个函数addCase，用来处理添加项目事件。该函数将showAddCase状态设置为true，从而显示子页面addCase。

伪代码实现：

// 父页面 index
import AddCase from "./addCase";

function Index() {
  const [showAddCase, setShowAddCase] = useState(false);
  const [editRow, setEditRow] = useState(null); // 当前编辑的行信息

  const toggleAddCase = () => {
    setShowAddCase(!showAddCase);
  };

  const editCase = (row) => {
    setEditRow(row);
    setShowAddCase(true);
  };

  const addCase = () => {
    setShowAddCase(true);
  };

  const handleFormSubmit = (formData) => {
    // 处理表单提交事件，添加或修改数据
    if (editRow) {
      // 修改数据
      // ...
    } else {
      // 添加数据
      // ...
    }
    // 关闭子页面
    toggleAddCase();
  };

  return (
    <div>
      {/* 添加项目按钮 */}
      <button onClick={addCase}>添加项目</button>

      {/* 表格 */}
      {/* ... */}

      {/* 子页面 */}
      {showAddCase && (
        <AddCase
          editRow={editRow}
          handleFormSubmit={handleFormSubmit}
          onClose={toggleAddCase}
        />
      )}
    </div>
  );
}

// 子页面 addCase
function AddCase(props) {
  const { editRow, handleFormSubmit, onClose } = props;
  const [formData, setFormData] = useState({});

  useEffect(() => {
    if (editRow) {
      // 编辑或复制
      setFormData(editRow);
    } else {
      // 添加
      setFormData({});
    }
  }, [editRow]);

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

  const handleSubmit = (event) => {
    event.preventDefault();
    handleFormSubmit(formData);
  };

  return (
    <div>
      {/* 表单 */}
      {/* ... */}

      {/* 关闭按钮 */}
      <button onClick={onClose}>关闭</button