---
# System prepended metadata

title: "\U0001F3C5 Day 11 ｜元件 props 事件處理"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 11 ｜元件 props 事件處理
props 不僅可以傳遞資料，也可以傳遞函式使用，讓元件共用同一個函式。如以下範例，我們可以將一個 handleClick 傳到 Child 元件內，讓元件點擊時可以根據不同的名稱來改變 Example 的 name 資料值。 因為是動態資料值，所以這邊會使用 `{}` 來將函式傳入。
```jsx=
function Example() {
  const [name, setName] = React.useState("John");
  const handleClick = name => {
    setName(name);
  };
  return (
    <div>
      <p>現在的 Name 是 <b>{name}</b></p>
      <Child name="John" handleClick={handleClick} />
      <Child name="Mary" handleClick={handleClick} />
    </div>
  );
}
```
在 Child 元件這邊，也同樣是 props 進來就可以使用囉
```jsx=
function Child({ name, handleClick }) {
  return <button onClick={() => handleClick(name)}>{name}</button> 
};
```

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/bGvExWE)，運用 props 資料和事件完成 Modal 的開關效果。


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
function Modal({ open, close }) {
  return <div className="modal" style={{ display: open? 'block' : 'none'}}> 
    <div className="modal-content">Modal 
      <button className="close" onClick={close}> x </button> 
    </div>
  </div>; 
};
function Example() {
  const [open, setOpen] = React.useState(false);
  const toggleOpen = () => {
    setOpen(!open);
  };
  return (
    <div>
      <button onClick={toggleOpen}> Open Modal </button>
      <Modal open={open} close={toggleOpen} />
    </div>
  );
}
```
-->


回報區
---


|         Discord         |                            CodePen / 答案                             |
|:-----------------------:|:---------------------------------------------------------------------:|
|        Rice#8043        |    [CodePen](https://codepen.io/riecball/pen/LYdzjqq?editors=0010)    |
|      Vita Ora#4585      |   [CodePen](https://codepen.io/showlovezz/pen/jOzepqX?editors=0010)   |
|       布魯諾#7239       |    [CodePen](https://codepen.io/bruno-yu/pen/abYRjZv?editors=1010)    |
|       yunyun#5215       |          [CodePen](https://codepen.io/yun_yunni/pen/XWExBKW)          |
|       黃士桓#7654       | [codePen](https://codepen.io/shr-huan-huang/pen/qBoJyqa?editors=1010) |
|       huch09#1426       |      [Codepen](https://codepen.io/subarashii-huch09/pen/oNqaMBB)      |
|       HedgehogKU        |  [CodePen](https://codepen.io/hedgehogkucc/pen/rNdqrjN?editors=1010)  |
|     DIANAxAKKO#4298     |   [Codepen](https://codepen.io/redfire29/pen/RwMeBKL?editors=0010)    |
|        棒腿#9350        |    [Codepen](https://codepen.io/frankHsu/pen/rNdqrLB?editors=1011)    |
|    許揚民 Evan#4546     |   [Codepen](https://codepen.io/gitevanhsu/pen/YzaJjNQ?editors=0010)   |
|        Shau#6400        |          [Codepen](https://codepen.io/shau-chen/pen/bGvmjqm)          |
|        Ayre#0016        |  [Codepen](https://codepen.io/yichunlin09/pen/OJvBwpE?editors=0010)   |
|       JarDar#6980       |          [codepen](https://codepen.io/jardarpen/pen/gOeBjWe)          |
|     Bumble幫啵#0255     |               [Codepen](https://codepen.io/pen/LYdgBLx)               |
|      Timothy#5863       | [Codepen](https://codepen.io/timothy_hippo/pen/ExEdpQy?editors=0010)  |
| React-慧茹(拉拉醬)#3414 |        [Codepen](https://codepen.io/lala-lee-jobs/pen/QWmZBQP)        |
|     Dylan_Lin#7320      |          [CodePen](https://codepen.io/lin-dylan/pen/KKoGBXL)          |
|       sheep#4352        |         [Codepen](https://codepen.io/chingyeeee/pen/ZExqjMb)          |
|      rainbow#3329       |   [Codepen](https://codepen.io/g901612002/pen/NWYOBmZ?editors=1010)   |
|        無名#6427        |    [Codepen](https://codepen.io/Nomoney/pen/abYRjRp?editors=0010)     |
|       AllenW#1132       |     [Codepen](https://codepen.io/AllenW/pen/OJvBwrr?editors=1111)     |
|       Yiling#4054       |           [Codepen](https://codepen.io/lin010/pen/RwMeYPe)            |
|        威爾#1694        |           [CodePen](https://codepen.io/WILL_Wu/pen/ZExqMGp)           |
|   Carolkiki2003#7399    |          [CodePen](https://codepen.io/wasfzuig/pen/KKoGxdd)           |
|       Tsuei#9284        |          [Codepen](https://codepen.io/AlbertoLL/pen/wvmYEKL)          |
|   Midnightdinner#6220   |         [Codepen](https://codepen.io/woowooyong/pen/mdxzGEa)          |
|     hiYifang #0736      |          [Codepen](https://codepen.io/hiYifang/pen/mdxzGVa)           |
|      ChloeLo#4858       |           [Codepen](https://codepen.io/chloelo/pen/zYWmLQN)           |
|        L0F0#8733        |      [Codepen](https://codepen.io/l0f0/pen/zYWmJwE?editors=0110)      |
|       Yanyan#3555       |         [Codepen](https://codepen.io/wei-yi-lee/pen/OJvBoZJ)          |
|       easton#3863       |      [Codepen](https://codepen.io/EastonIsCodingNow/pen/YzaJOvg)      |
|      Eric Su#7798       |            [Codepen](https://codepen.io/wc-su/pen/NWYOLEr)            |
|       Evonne#7078       |    [CodePen](https://codepen.io/Hsu1Fang/pen/vYRVVBB?editors=0111)    |
|        yuyu#6310        |    [CodePen](https://codepen.io/yuyu0905/pen/WNzaaNp?editors=1010)    |
|         翔#0859         |        [CodePen](https://codepen.io/energy95272z/pen/dymggoB)         |
|      IreneLee#7932      |    [CodePen](https://codepen.io/ntjtcxpt-the-animator/pen/LYdggEv)    |
|       #雪莉#4827        |         [CodePen](https://codepen.io/utshang216/pen/qBoJJBg)          |
|       wiimax#4564       |          [Codepen](https://codepen.io/willismax/pen/gOeBdGN)          |
|     Robert Lo#9653      |   [Codepen](https://codepen.io/Robert-Lo/pen/ExEddQJ?editors=1010)    |
|        ryo#0160         |            [Codepen](https://codepen.io/ryo72/pen/jOzeedp)            |
|       Kelvin#3296       |         [Codepen](https://codepen.io/kelvinchang/pen/wvmYQwm)         |
|         Wu#0167         |         [Codepen](https://codepen.io/Xander0705/pen/QWmZJNJ)          |
|       EvaLin#4546       |   [Codepen](https://codepen.io/evalin0316/pen/RwMeqyQ?editors=1011)   |
|        RON#2813         |           [Codepen](https://codepen.io/Ron115/pen/PoRyxEa)            |
|     Vada Chen#2055      |    [CodePen](https://codepen.io/vadachen/pen/wvmYExK?editors=0010)    |
|        SHIN#6075        |          [CodePen](https://codepen.io/shin9626/pen/xxWymgp)           |
|        魚魚#0937        |          [CodePen](https://codepen.io/fish0522/pen/PoRyXzg)           |
|       露易莎#7673       |         [Codepen](https://codepen.io/louisa-lin/pen/ZExqVye)          |
|      NinaKuo#3332       |         [Codepen](https://codepen.io/ninakuo0814/pen/abYRPVq)         |
|      Mr.Sean#3825       |          [Codepen](https://codepen.io/sean_1215/pen/xxWymBa)          |
|       Rocker#6235       |          [Codepen](https://codepen.io/RockerLi/pen/QWmZZaa)           |
|        Otis#8455        |   [Codepen](https://codepen.io/humming74/pen/vYRVPmJ?editors=1111)    |
|       Kenge#3690        |           [Codepen](https://codepen.io/pgkusn/pen/KKoGEWE)            |
|         TedWang         |   [Codepen](https://codepen.io/wangtaiyan/pen/Barqbgb?editors=0010)   |
|        shin#5792        |    [Codepen](https://codepen.io/hah1030/pen/poLxBLN?editors=0011)     |
|        Neal#0665        |    [Codepen](https://codepen.io/neallkf/pen/KKoGbXM?editors=0011)     |
|      Stanley#2505       |         [Codepen](https://codepen.io/bigbearada/pen/poLxmEp)          |
|        Kimi#2092        |          [Codepen](https://codepen.io/a3216lucy/pen/OJvBYVN)          |
|      yoshidc#0455       |          [Codepen](https://codepen.io/yoshiyyc/pen/poLxZWX)           |
|        lingxuan         |  [Codepen](https://codepen.io/lingxuan0618/pen/ZExqNPw?editors=1010)  |
|       Ryder#7398        |  [Codepen](https://codepen.io/rider159159/pen/eYMPwKN?editors=1010)   |
|     kyle890721#1016     |         [Codepen](https://codepen.io/KYLE890721/pen/PoRyrbQ)          |
|        城堡#2126        |          [Codepen](https://codepen.io/tthcastle/pen/ZExqgq)           |
|       楓之聲#6945       |          [Codepen](https://codepen.io/sshane258/pen/vYRVoxQ)          |
|       Anson#3594        |        [Codepen](https://codepen.io/huanmingchang/pen/wvmQMvZ)        |
|         hw#0715         |            [Codepen](https://codepen.io/Lhwei/pen/abYQddw)            |
|       Mitour#0672       |           [CodePen](https://codepen.io/mitour/pen/mdxQVqo)            |
|       真．穎旻粉撕#4995       |           [CodePen](https://codepen.io/gbnbihif/pen/poLQgxR)            |
|niel#2413|[Codepen](https://codepen.io/danielhsu/pen/zYWMrQW)|
|彼得#1923|[Codepen](https://codepen.io/shiou-ho/pen/eYMQZYV)|
|Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/KKorzwq)|
|Chelly#6129|[Codepen](https://codepen.io/chellyhsu/pen/GRxwZpg)|
|蘇蘇#0426|[Codepen](https://codepen.io/sabine1123/pen/KKorMwG)|
|LEO#7779|[Codepen](https://codepen.io/nekorice/pen/abYQZvb)|
|JessSong#5050|[Codepen](https://codepen.io/jssanji03/pen/zYWMKNw)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/XWEydRP)|
|ZengZeng|[Codepen](https://codepen.io/tyzyoko/pen/zYWMoRy)|
|JC#8658|[Codepen](https://codepen.io/jcsamoyed/pen/oNqQYrj)|
| IceSam#7836 | [Codepen](https://codepen.io/sam-hsu/pen/KKorNLB) |
|wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/dymQNjR) |
|YJ#1839 | [Codepen](https://codepen.io/cshjufxc/pen/PoRxpox) |
|葉秋#2335 | [Codepen](https://codepen.io/as880074/pen/JjLeXWz?editors=1111) |
|Joechiboo#3960 | [Codepen](https://codepen.io/joe-chiboo/pen/qBoQmNg) |
|aki|[codepen](https://codepen.io/aki168/pen/qBoQXxo)|
| Mao#5230 |[codepen](https://codepen.io/taomaomao/pen/QWmJqpg?editors=0010)|
| charlottelee849#0366 |[codepen](https://codepen.io/charlotte-lee/pen/RwMqLBr)|
| Claire#2116 |[codepen](https://codepen.io/claire-chang-the-bashful/pen/YzaREvx)|
| 山貓(焜)#7041 |[codepen](https://codepen.io/nopeta/pen/wvmQpWZ)|
|aka 宇智波鮪杰寶貝老婆|[codepan](https://codepen.io/wei-nie/pen/poLQPvw?editors=1010)|
|YuZhun#1362|[codepan](https://codepen.io/danzhun/pen/yLKQZOo?editors=1010)|
|眼睛 #0314|[codepan](https://codepen.io/thrizzacode/pen/ExEOJag?editors=0010)|
|KuoMin#4931|[codepan](https://codepen.io/KuoMin/pen/oNqQRBV?editors=1010)|
|moitw|[codepen](https://codepen.io/tsuifei/pen/jOzQjdJ?editors=0111)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/qBoLWEM)|
| 薯餅#3581 |[Codepen](https://codepen.io/ColdingPoTaTo/pen/KKobPgm)|
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/ZExVGyv?editors=1010)|
| Ada |[Codepen](https://codepen.io/zggsoagv-the-scripter/pen/oNqaPWM)|
|ねこ*#9385|[Codepan](https://codepen.io/kunpao0104/pen/dymQQbY)|
|CofCat#9226|[Codepan](https://codepen.io/cofcat456/pen/OJvdZjw)|
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/oNqmVJj)|
|Mori#5582|[Codepen](https://codepen.io/flower9312/pen/oNqVeEB)|
|hahaalin#3209|[Codepen](https://codepen.io/shellyPen/pen/WNzYLyv)|
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/PoRgBrG)|
|hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/xxWNGNX)|
|eching#9183|[Codepen](https://codepen.io/echin/pen/yLKWver?editors=0010)|
|JimmyChang#5558|[Codepen](https://codepen.io/JimmyChangWenChi/pen/GRxaGpO?editors=0110)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/vYRwLyL)|
|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/wvmbbzX)|
|JimHwang#3594|[Codepen](https://codepen.io/jimh1129/pen/ExEBaez)|
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/xxWoGyg?editors=1011)|
|Overy#4545|[Codepen](https://codepen.io/overy-tsai/pen/WNzqZNJ)
|Kyle Lin#0561|[Codepen](https://codepen.io/thenkyle/pen/JjLgrgR)
|JasonLU|[Codepen](https://codepen.io/wnptocip/pen/XWEvZzL?editors=1011)
|C#4593|[Codepen](https://codepen.io/ShaniMa/pen/YzLGENe)
|GL#2256|[Codepen](https://codepen.io/4genie/pen/LYraymL)
|       Nico#8739       |           [CodePen](https://codepen.io/Nicof2e/pen/rNQMBZg?editors=0010)            |
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/vYMzbEb)|
