檢查功能做完，接著要把功能與畫面結合，這時 React 就登場囉！

這邊會做基本資料檢查

製作畫面

我們畫面就很簡單的做一個輸入的欄位，還有觸發檢查的按鈕，並且把結果顯示在下方。因此會有三個主要的物件。

• 製作基本檢查功能

運用在 Day2 開發的 IDChecker.js 功能，把它引入到 View.jsx 進行使用。

import { checkBasic } from "./IDChecker";

先行使用基本的檢查功能 checkBasic() 檢查長度、性別碼等等是否符合預期。

• 製作 View.jsx

我們的主要程式碼放在 View.jsx，裡面定義要顯示的畫面。這邊會有一個輸入身分證字號的地方，當每次有變動的時候，就會記錄下來，並且讓 React 轉譯到 Label 中。

當我們要檢查的時候，就點擊按鈕，就會呼叫檢查的 IDCheck功能。在這個範例檢查基本格式。

function CheckIdComponent() {
  let [id, setId] = useState(0);
  let [result, setResult] = useState(0);

  function IDCheck() {
    console.log("id=" + id);
    const r = checkBasic(id);
    setResult(r);
    console.log(`"result: ${result}, ${r}"`);
  }

  return (
    <div>
      <h1>檢查身份證</h1>
      <div>
        <label>輸入身分證字號：</label>
        <input
          itemType="text"
          className="idno"
          onChange={(e) => setId(e.target.value)}
        ></input>
        <button onClick={IDCheck}>檢查</button>
      </div>
      <div>
        <label>
          身分證：{id}，結果：{result}
        </label>
      </div>
    </div>
  );
}

後記

初步做完檢查畫面，接下來把完整的身分證檢查放進去，之後就可以製作產生身分證字號的工具。當做完身分證製造機後，把產出的結果放在我們這個頁面進行檢查。如果通過，就大功告成囉～