攝氏與華氏

常見的氣溫標記方式為攝氏溫標（degree Celsius）和華氏溫標（degree Fahrenheit），也就是常見的 °C 或 °F 兩種，這兩種的換算如下：

°F = (9/5)*(°C) + 32
°C = (5/9)*(°F - 32)

意義：

• 華氏溫度：在標準大氣壓下，冰的熔點為32℉，水的沸點為212℉，中間等分180份，每等分為華氏1度。
• 攝氏溫度：在標準大氣壓下，純水的凝固點為0°C，水的沸點為100°C，中間分100等份，每等份為攝氏1度。

轉換程式碼

首先製作出攝氏與華氏的變數，接著根據公式，製作溫度轉換：

  let [celsius, setCelsius] = useState(0);
  let [fahrenheit, setFahrenheit] = useState(0);

  const handleCelsiusChange = (e) => {
    setCelsius(e.target.value);
    setFahrenheit((9.0 / 5.0) * celsius + 32);
    console.log("e:" + celsius + "|f:" + fahrenheit);
  };

  const handleFahrenheitChange = (e) => {
    setFahrenheit(e.target.value);
    setCelsius((5.0 / 9.0) * (fahrenheit - 32));
    console.log("e:" + fahrenheit + "|c:" + celsius);
  };

最後結果如下：

import { useState } from "react";

function DegreeChange() {
  let [celsius, setCelsius] = useState(0);
  let [fahrenheit, setFahrenheit] = useState(0);

  const handleCelsiusChange = (e) => {
    setCelsius(e.target.value);
    setFahrenheit((9.0 / 5.0) * celsius + 32);
    console.log("e:" + celsius + "|f:" + fahrenheit);
  };

  const handleFahrenheitChange = (e) => {
    setFahrenheit(e.target.value);
    setCelsius((5.0 / 9.0) * (fahrenheit - 32));
    console.log("e:" + fahrenheit + "|c:" + celsius);
  };

  return (
    <div>
      <h1>溫度換算</h1>
      <div>
        <label>攝氏溫度（°C ）</label>
        <div>
          <input itemType="text" onChange={handleCelsiusChange}></input>
        </div>
      </div>
      <div>
        <label>華氏溫度（°F ）</label>
        <div>
          <input itemType="text" onChange={handleFahrenheitChange}></input>
        </div>
      </div>
      <div>
        <label>
          {celsius}°C ={fahrenheit} °F
        </label>
      </div>
    </div>
  );
}

export default DegreeChange;

但這還是發生個問題，每次onChange時候，只會讀取上次的狀態，並不是最新的狀態，所以會有顯示如100°C =50 °F 錯誤的窘境...

需要花時間再研究一下

參考資料

• Wiki：攝氏標溫
• Wiki：華氏標溫

後記

首先做了個溫度轉化，看似簡單的轉換，但是對於新手的我仍是有些討戰，要研究一下為什麼讀資料都不是當下的值，是之前的值。