带有 React Hooks 的摄氏度到华氏度转换器

Question

我正在尝试使用 React Hooks 编写摄氏度到华氏度（反之亦然）转换器的代码。
但是两种方式的数据绑定不起作用，我不明白为什么。
有人可以帮忙吗？
谢谢！

这是我的代码

function GradConverter(){

const [Cgrad, toC] = React.useState(null)
  const [Fgrad, toF] = React.useState(null)

  return(
    <div id="container">
      <div id="box1">
        <h1>Celsius</h1>
        <input
            type = "number"
            value = { Cgrad }
            onChange = {(event) => toF((event.target.value * 9 / 5) + 32).toFixed(2) } >
          </input>
      </div>
      <div id="box2">
          <h1>Fahrenheit</h1>
          <input
            type = "number" 
            value = { Fgrad } 
            onChange = {(event) => toC((event.target.value - 32) * 5 / 9).toFixed(2) } >
          </input>
          </div>
    </div>
  )
}

Answer 1

您需要两个测量系统都有一个状态，并且在发生变化时始终更新两个值：

function GradConverter(){
  const [temp, updateTemp] = React.useState({ f: 0, c: 0 })

  const updateC = ev => updateTemp({
    c: ev.target.value,
    f: (+ev.target.value * 9 / 5 + 32).toFixed(2)
  })
  
  const updateF = ev => updateTemp({
    c: ((+ev.target.value - 32) * 5 / 9).toFixed(2),
    f: ev.target.value
  })

  return(
    <div id="container">
      <div id="box1">
        <h1>Celsius</h1>
        <input
            type = "number"
            value = {temp.c}
            onChange = {updateC} >
          </input>
      </div>
      <div id="box2">
          <h1>Fahrenheit</h1>
          <input
            type = "number" 
            value = {temp.f} 
            onChange = {updateF}>
          </input>
          </div>
    </div>
  )
}

ReactDOM.render(
  <GradConverter />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

您的代码的问题在于您使用状态更新函数（toC 和 toF）直接通过计算更新值，但您没有正确处理双向数据绑定。

您需要：

1- 分别更新两个状态
2- 解析并确保数值

这是可能对您有帮助的代码

import React, { useState } from 'react';

function GradConverter() {
  const [Cgrad, setCgrad] = useState('');
  const [Fgrad, setFgrad] = useState('');

  const handleCelsiusChange = (event) => {
    const celsius = parseFloat(event.target.value);
    setCgrad(celsius);
    setFgrad((celsius * 9 / 5 + 32).toFixed(2));
  };

  const handleFahrenheitChange = (event) => {
    const fahrenheit = parseFloat(event.target.value);
    setFgrad(fahrenheit);
    setCgrad(((fahrenheit - 32) * 5 / 9).toFixed(2));
  };

  return (
    <div id="container">
      <div id="box1">
        <h1>Celsius</h1>
        <input
          type="number"
          value={Cgrad}
          onChange={handleCelsiusChange}
        />
      </div>
      <div id="box2">
        <h1>Fahrenheit</h1>
        <input
          type="number"
          value={Fgrad}
          onChange={handleFahrenheitChange}
        />
      </div>
    </div>
  );
}

export default GradConverter;