如何在转换器应用程序的输入之间切换以做出反应？

Question

我建立了一个摄氏度（作为输入）到华氏度（作为输出）的转换器，但是
我想在摄氏度和华氏度之间切换作为输入和输出
我的意思是，当我点击华氏度时，它会变成输入并使用可以编辑它的类型 init 并看到
celsius 作为结果（作为输出）和 viceversa
如何切换输入输出？

import { useState } = React;
function App() {
    // Use State
    const [celsius_value, set_celsius_value] = useState("");
    const [fahrenheit_value, set_fahrenheit_value] = useState("");

    // state functions
    const celsius_to_fahrenheit_converter = (e) => {
        const celsius_value_input = Number(e.target.value);
        set_celsius_value(celsius_value_input);
        // convert value
        set_fahrenheit_value((celsius_value_input * 9) / 5 + 32);
    };

    const fahrenheit_to_celsius_converter = (e) => {
        const fahrenheit_value_input = Number(e.target.value);
        set_fahrenheit_value(fahrenheit_value_input);
        // Convet value
        set_celsius_value(((fahrenheit_value_input - 32) * 5) / 9);
    };
  
    return (
        <div className="container">
            {/* Celsius */}
            <div className="celsius-container">
                <label htmlFor="celsius-input">celsius</label>
                <input
                    type="number"
                    name="celsius"
                    id="celsius-input"
                    value={celsius_value}
                    onChange={(e) => {
                        celsius_to_fahrenheit_converter(e);
                    }}
                />
            </div>
            {/* fahrenheit  */}
            <div className="fahrenheit -container">
                <label htmlFor="fahrenheit -input">fahrenheit </label>
                <input
                    type="number"
                    name="fahrenheit "
                    id="fahrenheit-input"
                    value={fahrenheit_value}
                    onChange={(e) => {
                        fahrenheit_to_celsius_converter(e);
                    }}
                />
            </div>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById("root"));

.container{
  border:1px solid green;
  width:30%;
  height:30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.container div{
  display: flex;
  flex-direction: column;
}

label{
  font-size:20px;
  text-transform: uppercase;
  font-family: monospace;
}

#celsius-input,#fahrenheit-input{
  padding:10px 20px;
  text-align: center;
  outline:none;
}

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

Answer 1

您需要另一个函数 fahrenheit_to_celsius_converter，当华氏温度输入改变时需要调用该函数。

注：

不要将输入状态强制为Number，让它们是字符串，否则输入可能无法按预期工作。
IMO 清除一个输入也应该清除另一个，检查下面代码段中的提前退出条件。

const { useState } = React;

function App() {
  // Use State
  const [celsius_value, set_celsius_value] = useState("");
  const [fahrenheit_value, set_fahrenheit_value] = useState("");

  // state functions
  const celsius_to_fahrenheit_converter = (e) => {
    const celsius_input = e.target.value;
    set_celsius_value(celsius_input);

    if (celsius_input === "") {
      set_fahrenheit_value("");
      return;
    }

    const celsius_value = Number(celsius_input);
    const fahrenheit_value = String((celsius_value * 9) / 5 + 32);
    set_fahrenheit_value(fahrenheit_value);
  };

  const fahrenheit_to_celsius_converter = (e) => {
    const fahrenheit_input = e.target.value;
    set_fahrenheit_value(fahrenheit_input);

    if (fahrenheit_input === "") {
      set_celsius_value("");
      return;
    }

    const fahrenheit_value = Number(fahrenheit_input);
    const celcius_value = String(((fahrenheit_value - 32) * 5) / 9);
    set_celsius_value(celcius_value);
  };

  return (
    <div className="container">
      {/* Celsius */}
      <div className="celsius-container">
        <label htmlFor="celsius-input">celsius</label>
        <input
          type="number"
          name="celsius"
          id="celsius-input"
          value={celsius_value}
          onChange={(e) => {
            celsius_to_fahrenheit_converter(e);
          }}
        />
      </div>
      {/* Fahrenheit  */}
      <div className="fahrenheit-container">
        <label htmlFor="fahrenheit-input">fahrenheit </label>
        <input
          type="number"
          name="fahrenheit "
          id="fahrenheit-input"
          value={fahrenheit_value}
          onChange={(e) => {
            fahrenheit_to_celsius_converter(e);
          }}
        />
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

您也可以使用输入元素上的 name 属性对单个处理程序执行相同的操作。

const { useState } = React

function App() {
  const [celsius_value, set_celsius_value] = useState("");
  const [fahrenheit_value, set_fahrenheit_value] = useState("");

  const converter = (e) => {
    if (e.target.name === "celsius") {
      const celsius_input = e.target.value;
      set_celsius_value(celsius_input);

      if (celsius_input === "") {
        set_fahrenheit_value("");
        return;
      }

      const celsius_value = Number(celsius_input);
      const fahrenheit_value = String((celsius_value * 9) / 5 + 32);
      set_fahrenheit_value(fahrenheit_value);
    } else {
      const fahrenheit_input = e.target.value;
      set_fahrenheit_value(fahrenheit_input);

      if (fahrenheit_input === "") {
        set_celsius_value("");
        return;
      }

      const fahrenheit_value = Number(fahrenheit_input);
      const celcius_value = String(((fahrenheit_value - 32) * 5) / 9);
      set_celsius_value(celcius_value);
    }
  };

  return (
    <div className="container">
      {/* Celsius */}
      <div className="celsius-container">
        <label htmlFor="celsius-input">celsius</label>
        <input
          type="number"
          name="celsius"
          id="celsius-input"
          value={celsius_value}
          onChange={converter}
        />
      </div>
      {/* Fahrenheit  */}
      <div className="fahrenheit-container">
        <label htmlFor="fahrenheit-input">fahrenheit </label>
        <input
          type="number"
          name="fahrenheit"
          id="fahrenheit-input"
          value={fahrenheit_value}
          onChange={converter}
        />
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

Answer 2

您可以使用相同的 onChange 处理程序，但使用基于当前聚焦输入的条件：

const useState = React.useState

function App() {
    // Use State
    const [celsius_value, set_celsius_value] = useState(0);
    const [fahrenheit_value, set_fahrenheit_value] = useState(0);
    const [selected, setSelected] = useState("")

    // state functions
    const handleConversion = (e) => {
    if(selected === "celsius"){
        set_celsius_value(e.target.value);
        set_fahrenheit_value(((e.target.value) * (9 / 5) + 32).toFixed(1));
        } else {
         set_fahrenheit_value(e.target.value);
         set_celsius_value(((e.target.value - 32) * (5 / 9)).toFixed(1));
        // convert value
}
    };

    return (
        <div className="container">
            {/* Celsius */}
            <div className="celsius-container">
                <label htmlFor="celsius-input">celsius</label>
                <input
                    type="number"
                    name="celsius"
                    id="celsius-input"
                    value={celsius_value}
                    onFocus={(e) => setSelected("celsius")}
                    onChange={handleConversion}
                />
            </div>
            {/* fahrenheit  */}
            <div className="fahrenheit -container">
                <label htmlFor="fahrenheit -input">fahrenheit </label>
                <input
                    type="number"
                    name="fahrenheit "
                    id="fahrenheit-input"
                    value={fahrenheit_value}
                    onFocus={(e) => setSelected("farenheit")}
                    onChange={handleConversion}
                />
            </div>
        </div>
    );
}

ReactDOM.render(<App />, root)

.container{
  border:1px solid green;
  width:30%;
  height:30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.container div{
  display: flex;
  flex-direction: column;
}

label{
  font-size:20px;
  text-transform: uppercase;
  font-family: monospace;
}

#celsius-input,#fahrenheit-input{
  padding:10px 20px;
  text-align: center;
  outline:none;
}

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

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

如何在转换器应用程序的输入之间切换以做出反应？

how to switch between inputs in converter app in react?

javascript

reactjs

input

use-state