---
tags: N108 Component
---
# Memberinfobtn.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                infobtn [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `input` | <font color='blue'>bool</font> | 輸入中參數，true 為正在輸入，false 為非輸入中 | `false`|
| `text` |<font color='orange'>string</font> | 輸入的字串| `""` |
### input
- React.createRef() 輸入用

## componentDidUpdate
1. 當 prevState.input != this.state.input 和 this.state.input == true (目前正在輸入時)，將對 input 做 focus()，
2. 本身會員有資料時，會將資料改寫 this.input.current.value 的值
3. 最後 Call props.userinfoapi()，重新 update 上層 state
## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|opensetting()|input = true|否|
|enter()|輸入完成的 enter 鍵，且針對輸入Call API|是|
|closesetting()|輸入完成後，API 設定|是|
### closesetting() 介紹
- 先將輸入關閉
- 根據 props.type 去決定 API 名稱
- Account/email、Account/phone、Account/address、Account/birthday
- 全部更改過後再一次 Call props.userinfoapi()，重新 update 上層 state

## API 數量表格
- 這邊比較特別 都只會有**一支 API**，但有可能不同名稱的 API (根據 props.type)

| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Account/email|<font color='DarkOrange'>post</font>|修改個人電子郵件 *(目前不給使用)*|closesetting()|
|Account/phone|<font color='DarkOrange'>post</font>|修改電話|closesetting()|
|Account/address|<font color='DarkOrange'>post</font>|修改個人地址|closesetting()|
|Account/birthday|<font color='DarkOrange'>post</font>|修改生日|closesetting()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `type` | <font color='orange'>string</font>|哪一種資料類別，ex：email、phone、address、birthday|
| `data` | <font color='orange'>string</font>| 原本 API 傳出的個人資料|
### return
- 沒資料會顯示"尚未設定

{
    !input &&
    <div className="inline">
        {data == null ? "尚未設定" : data} {type != "email" && <i className="fa mouse" onClick={this.opensetting}>&#xf013;</i>}
    </div>
}

- 因為 birthday 是日期型態 `type="date"`，有特別判斷，其他 3 種都一樣是 input `type="text"`
- email 有寫 API，但 button 沒寫 *(故意，不給改)*
- Svg 為編輯 button
- 
- 

{
    input &&
    <div className="inline">
        {type == "birthday" &&
            <input type="date" id={`set${type}`} className="setinfo" ref={this.input}
                onChange={this.setinfo} onBlur={this.closesetting} onKeyDown={this.enter} ></input>}
        {type != "birthday" &&
            <input type="text" id={`set${type}`} className="setinfo" ref={this.input}
                onChange={this.setinfo} onBlur={this.closesetting} onKeyDown={this.enter}></input>}
        &ensp;
        <svg className="entericon mouse" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" onClick={this.closesetting}>
            <path d="M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z" />
        </svg>
    </div>
}