---
tags: N108 Component
---
# ExamChoosebtn.jsx
- component 切換流程圖
- 可以配合 PPT 17頁

digraph Pageswitch {
                nodesep=0.8
                node [color=orange, fontsize=22, shape=box]
                edge [color=RosyBrown, style=dashed]
                Exam->{Contain Wrapper}
                Wrapper->{ProblemImg Choosebtn Issue}
                Choosebtn [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='blue'>bool array</font> | API 傳回的資料| `[false, false, false, false, false]` |

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|write()|簡單來說就是按下去的那個按鈕變成 true，並更新 state 刷新畫面|否|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `id` | <font color='Salmon'>int</font> | 第幾題的 index (0-base)|
### return
- 顯示用 div，包含：更新 state

<div className="dis-space-between btnlist">
    <button type="button" className={this.state.data[0] ? "btn-selected" : "btn"} onClick={(e) => this.write(0)}>A</button>
    <button type="button" className={this.state.data[1] ? "btn-selected" : "btn"} onClick={(e) => this.write(1)}>B</button>
    <button type="button" className={this.state.data[2] ? "btn-selected" : "btn"} onClick={(e) => this.write(2)}>C</button>
    <button type="button" className={this.state.data[3] ? "btn-selected" : "btn"} onClick={(e) => this.write(3)}>D</button>
    <button type="button" className={this.state.data[4] ? "btn-selected" : "btn"} onClick={(e) => this.write(4)}>E</button>
</div>

- 不顯示 div，給予上層 React.createRef() 抓取

<div className="dis-no">
    <input type="checkbox" className={this.state.data[0] ? "btn-selected" : "btn"} name={`${id}A`}></input>
    <input type="checkbox" className={this.state.data[1] ? "btn-selected" : "btn"} name={`${id}B`}></input>
    <input type="checkbox" className={this.state.data[2] ? "btn-selected" : "btn"} name={`${id}C`}></input>
    <input type="checkbox" className={this.state.data[3] ? "btn-selected" : "btn"} name={`${id}D`}></input>
    <input type="checkbox" className={this.state.data[4] ? "btn-selected" : "btn"} name={`${id}E`}></input>
</div>

[回上層 ExamWrapper.jsx](https://hackmd.io/JqzV6luhSsCA3CPCxtt_sg?view)