react 弹出编辑页面

你可以使用 React 中的 Modal 组件来实现弹出编辑页面的效果。Modal 组件通常会将一个 overlay（覆盖层）放在页面上，并在其上面渲染一个包含编辑页面内容的弹窗。

以下是一个基本的示例代码：

import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';

function EditModal(props) {
  const [showModal, setShowModal] = useState(false);

  const handleShowModal = () => setShowModal(true);
  const handleCloseModal = () => setShowModal(false);

  const handleSubmit = () => {
    // 处理表单提交逻辑
    handleCloseModal();
  };

  return (
    <>
      <Button variant="primary" onClick={handleShowModal}>
        编辑
      </Button>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>编辑页面</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* 编辑页面内容 */}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            取消
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

你可以根据需要自定义 Modal 组件的样式和内容，以实现你想要的编辑页面效果。