製作完產生身分證的 JavaScript，接著就把它們放入 React 的程式中。

.jsx 引入功能

在使用 Day25 的樣式，結合 Day26 的程式，就可以把他們合併在一起使用。

在 IdCreater.jsx 中已經定義了樣式，也就是有城市與性別的下拉選單，接著把在 idnoCreater.js 的主要功能 createID() 載入。

import { createID } from "./IdnoCreater";

在 .jsx 使用製造機功能

當我們引入後，在 VS Code 中顯示暗的顏色，這表示這個參數沒有被使用，可以刪掉。而這邊沒有使用的原因是，我們根本好沒有用（這是廢話）。因此在點擊【產生】按鈕時，會呼叫這個 createID() 製造身分證字號的功能，進行製作身分證。

為了達到目的，我們在 button 增加 onClick 功能，並指定該功能呼叫 createID() 進行作業。

• 定義變數
  一開始定義好變數，city 和 gender，用來取得下拉式選單的資料，以及 idno 儲存身份證資料：

let [idno, setIdno] = useState("X");
let [city, setCity] = useState("Y");
let [gender, setGender] = useState("2");

在變數中，這邊有設定預設直，目的在於一開始的時候下拉式選單就會依據自己設定的值，選擇相對應的選項。

• 修改下拉選單

在這邊修改下拉選單的內容，其中選項的值從數值改成地區碼的英文字母，然後給他一個預設值。這個預設值是存在 city 的直，並且每次變動時，就更新 city 的值：

//節錄
<label>選擇縣市</label>
<select
  id="SelectCity"
  defaultValue={city}
  onChange={(e) => setCity(e.target.value)}
>
  <option value="A">A-臺北市</option>
  <option value="Y">Y-陽明山管理局 </option>
</select>

當然性別也是這樣修改，預設值為「2」：

<label>選擇性別</label>
<select
  id="SelectGender"
  defaultValue={gender}
  onChange={(e) => setGender(e.target.value)}
>
  <option value="1">男（本國出生）</option>
  <option value="2">女（本國出生）</option>
  <option value="8">男（非本國出生）</option>
  <option value="9">女（非本國出生）</option>
</select>

• 修改按鈕

按鈕就很簡單，直接在點擊的時候呼叫一個新的功能 idHandler（此功能詳細看程式碼），其作用是檢查取得的值，並且呼叫 createID() 產生身分證，並且回傳到 idno 中。

<div>
  <button onClick={idHandler}>產生</button>
</div>

const idHandler = () => {
  console.log(`city=${city}, gender=${gender}`);
  const r = createID(city, gender);
  setIdno(r);
  console.log(`idno=${idno}(r)`);
};

顯示產生的身分證字號

使用 console 可以到有產生出身分證，接著在需要在畫面呈現，因此就增加一個 label 來顯示製作出的結果，也就是顯示 idno 的值。

<div>
  <label>身分證字號：{idno}</label>
</div>

這樣簡單的身分證製造機就完成囉！可以依照自己想要的地點與性別進行製作，這樣就可以簡單地在本機進行產生身分證的作業，

完整程式碼

idCreater.jsx

import { useState } from "react";
import { createID } from "./IdnoCreater";

function IdCreaterComponent() {
  let [idno, setIdno] = useState("X");
  let [city, setCity] = useState("Y");
  let [gender, setGender] = useState("2");

  const idHandler = () => {
    console.log(`city=${city}, gender=${gender}`);
    const r = createID(city, gender);
    setIdno(r);
    console.log(`idno=${idno}(r)`);
  };

  return (
    <div>
      <h1>身分證製造機</h1>
      <div>
        <label>選擇縣市</label>
        <select
          id="SelectCity"
          defaultValue={city}
          onChange={(e) => setCity(e.target.value)}
        >
          <option value="A">A-臺北市</option>
          <option value="B">B-臺中市</option>
          <option value="C">C-基隆市</option>
          <option value="D">D-臺南市</option>
          <option value="E">E-高雄市</option>
          <option value="F">F-新北市</option>
          <option value="G">G-宜蘭縣</option>
          <option value="H">H-桃園市</option>
          <option value="I">I-嘉義市</option>
          <option value="J">J-新竹縣</option>
          <option value="K">K-苗栗縣</option>
          <option value="M">M-南投縣</option>
          <option value="N">N-彰化縣</option>
          <option value="O">O-新竹市</option>
          <option value="P">P-雲林縣</option>
          <option value="Q">Q-嘉義縣</option>
          <option value="T">T-屏東縣</option>
          <option value="U">U-花蓮縣</option>
          <option value="V">V-臺東縣</option>
          <option value="W">W-金門縣</option>
          <option value="X">X-澎湖縣</option>
          <option value="Z">Z-連江縣</option>
          <option value="L">L-臺中縣</option>
          <option value="R">R-臺南縣</option>
          <option value="S">S-高雄縣</option>
          <option value="Y">Y-陽明山管理局 </option>
        </select>
      </div>
      <div>
        <label>選擇性別</label>
        <select
          id="SelectGender"
          defaultValue={gender}
          onChange={(e) => setGender(e.target.value)}
        >
          <option value="1">男（本國出生）</option>
          <option value="2">女（本國出生）</option>
          <option value="8">男（非本國出生）</option>
          <option value="9">女（非本國出生）</option>
        </select>
      </div>
      <div>
        <button onClick={idHandler}>產生</button>
      </div>
      <div>
        <label>身分證字號：{idno}</label>
      </div>
    </div>
  );
}

export default IdCreaterComponent;

後記

接著再增加一些功能，讓這個身分證製造機可以變得更厲害！