彈出視窗的按鈕跟內建的方法

controllerButton.js

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import EditingWindow from './editing_window/'; // 使用自己調整位置

const ControllerButton = () => {
  const [editingShow, setEditingShow] = useState(false);
  return (
    <div className="blog__controller">
      <Button variant="outline-success" onClick={() => setEditingShow(true)} >編輯</Button>
      <Button variant="outline-danger">刪除</Button>
      {editingShow &&
        <EditingWindow /** 編輯視窗 */
          show={editingShow}
          onHide={() => setEditingShow(false)}
          state="editing"
        />}
    </div>
  )
}

EditingWindow.js

import React from 'react';
import './editingWindow.css';
import { Button, Modal } from 'react-bootstrap';

const EditingWindow = ({ onHide, show, state }) => (
  <Modal
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
    {...{ onHide, show }}

  >
    <Modal.Header closeButton>
      <Modal.Title id="contained-modal-title-vcenter">
        {state === "editing" ? "你正在編輯文章" : "你正在新增文章"}
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <h4>Centered Modal</h4>
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
        consectetur ac, vestibulum at eros.
        </p>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="outline-secondary" onClick={onHide}>Close</Button>
      <Button variant="outline-primary" onClick={() => console.log('送出')} > Save changes</Button>
    </Modal.Footer>
  </Modal>
);

export default EditingWindow;