# 🏅Day35 - React 套件應用 (1) - Bootstrap Modal

在 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。

<!-- 解答：

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 />);

-->

| Name | Codepen |
| -------- | -------- |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYOXWMo?editors=1010) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/GgqMxoj) |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/OPXzBGL?editors=0010)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/XJKZRaj)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/KwMQmQw)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/zxBRwaZ)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/VYjQbjr)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/KwMQmrd?editors=0011)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=GgqQEJa)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/yyJvXyg) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/PwzQjwM?editors=1010) |
| Nooooora |[CodePen](https://codepen.io/Nora-Ch/pen/bNeLRmg?editors=1010)|
| 地瓜 |[CodePen](https://codepen.io/ChippyYU/pen/azZqWjy?editors=1010)|
| 老屠 |[CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/EayQvjM?editors=0010)|
| Rogan |[CodePen](https://codepen.io/RoganHsu/pen/NPryaXZ?editors=1010)|
| andy |[CodePen](https://codepen.io/ewnblckz-the-styleful/pen/qENxVrJ?editors=0011)|
| 平平 |[CodePen](https://codepen.io/ypinpin/pen/RNRQxMp)|
| 小懿 |[CodePen](https://codepen.io/YT-the-vuer/pen/GgqQQLz?editors=0010)|
| Percy |[CodePen](https://codepen.io/Percy-Ku/pen/zxBRWPj)|
| wind | [CodePen](https://codepen.io/wind7y/pen/MYeQBBO) |
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/XJKZGvP) |
| kashiwatei | [CodePen](https://codepen.io/kashiwatei/pen/azZqgaa?editors=1011) |
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/bNevbWO) |
| Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/bNevNxL?editors=1010) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/ogLqWQo) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/jErZLwK?editors=1010) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/YPWLrbY) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/PwzedMp?editors=1010) |