在 React 若需要使用外部套件，如 Bootstrap，以及會操作到 DOM，可以使用 [useRef](https://react.dev/reference/react/useRef) 這個 Hook 來引用需要操作的 DOM，Ref 在 React 是用以儲存值的物件，使用 useRef() 儲存即將要操作的 DOM，透過 useRef 儲存的值不會受到畫面渲染影響。

以 Bootstrap 的 Modal 為例，使用 JavaScript 來操作 Modal，作法如下：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));

// 可以使用 myModal 加上 Bootstrap 提供的方法操作 Modal
myModal.show();

Bootstrap Modal 可以使用的方法可參考[文件](https://getbootstrap.com/docs/5.3/components/modal/#methods)。

### useRef
在 React 使用 useRef()，在要綁定的 DOM 設定 ref，綁定完成後印出，會是一個物件，值會儲存在 current 屬性中，後續需要操作 DOM 就可以使用 myModal.current 取得。

function Example() {
 const myModal = useRef(null);

 useEffect(() => {
  console.log('myModal', myModal);
  // myModal {current: div.modal.fade}
  
  // 綁定 Modal
  myModal.current = new bootstrap.Modal(modalRef.current);

  // 使用 myModal.current 加上 Bootstrap 提供的方法操作 Modal
  myModal.current.show();
 },[])



 return (
  // Modal
  <div class="modal fade" ref={myModal}>
  ...
  </div>
 )
}

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNgRqo?editors=1010)，使用 useRef() 綁定 Bootstrap Modal，並使用 Bootstrap Modal 的 show() 方法開啟 Modal。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

function Example() {
 
  const myModal = React.useRef(null);
  
  
  React.useEffect(() => {
    myModal.current = new bootstrap.Modal(myModal.current);
  },[])
  
  
  const openModal = () => {
  
    myModal.current.show();
  };
  return (
    <div>
      <button type="button" className="btn btn-primary" onClick={openModal}>
        開啟 Modal
      </button>

        <div className="modal fade" ref={myModal}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h1 className="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/emOVKKK?editors=1011) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/gbYErXb?editors=1011) |
| 3 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/azogaab?editors=1010) |
| 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/zxOgvWR) |
| 5 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/vEBoNvo) |
| 6 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/OPLKyay) |
| 7 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/vEBoNwB) |
| 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/MYgNKYQ) |
| 9 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/zxOgrNy?editors=1011) |
| 10 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/LEPwGgp?editors=1011) |
|11|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/QwLeyZx?editors=1011)
| 12 | Amanda | [Codepen](https://codepen.io/cym199922/pen/RNbXaZx) |
| 13 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/NPKQxOY?editors=0011)|
| 14 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/xbKvOBy) |
| 15 | Clove | [Codepen](https://codesandbox.io/p/sandbox/468lgk) |
| 16 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/OPJLyQe) |
| 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/NPWKYjQ?editors=1010) |
| 18 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/WbNeaLL) |
| 19 |邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/QwWwGqa?editors=1011)|
| 20 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/LEYEbMp) |
| 21 | Jasmine | [Codepen](https://codepen.io/RoganHsu/pen/JojopVo?editors=1011) |
| 22 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JojopVo?editors=1011) |
| 23 | Toung | [Codepen](https://codepen.io/Toung/pen/YPzPbeX) |
| 24 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/qEBZzQG?editors=1010) |
| 25 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/Eaxggdq?editors=1010) |
| 26 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/zxYoJVb?editors=1011) |
| 27 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/PwoQPrw?editors=0011) |
| 28 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/MYWqGxa?editors=1011) |
| 29 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/ZYYPJMg?editors=0010) |
| 30 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/WbvmWpq?editors=1011) |
| 31 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/ByjpQRg) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |