代码之家  ›  专栏  ›  技术社区  ›  Amin Alizadeh

如何在react的转换器应用程序中切换输入?

use-state input reactjs javascript
  •  0
  • Amin Alizadeh  · 技术社区  · 3 年前

    我用react But构建了一个摄氏度(作为输入)到华氏度(作为输出)的转换器
    我想在摄氏度和华氏度之间切换作为输入和输出
    我的意思是,当我点击华氏温度时,它会变成输入,使用它可以编辑一个类型init,然后看到
    结果为摄氏度(作为输出),反之亦然
    如何在输入和输出之间切换? 

    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>
    2 回复  |  直到 3 年前
        1
  •  1
  •   Cesare Polonara    3 年前

    你可以用同样的方法 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>
        2
  •  0
  •   Som Shekhar Mukherjee    3 年前

    你需要另一个功能 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"));
    <脚本交叉源src=”https://unpkg.com/react@17/umd/react。发展js“></script>
<脚本交叉源src=”https://unpkg.com/react-dom@17/umd/react dom。发展js“></script>
<div id=“root”></部门>
    推荐文章
    Carlos Henrique R. Pereira  ·  我的API请求有效,但无法访问内容
    3 年前
    Agrim Singh  ·  用户数据。名称未显示用户名
    3 年前
    jmsapps  ·  Typescript中useContext的useState
    3 年前
    Manas S. Roy  ·  正在useState()中从数组中删除项
    3 年前
    Amin Alizadeh  ·  如何在react的转换器应用程序中切换输入?
    3 年前
    Ukena Tora  ·  useState set函数在获取后不工作
    3 年前
    noiseymur  ·  TypeError:useState不是函数或其返回值不可编辑
    3 年前
    Gusta  ·  为什么我在尝试设置状态时会得到太多渲染?
    3 年前
    Ben Fisher  ·  复选框状态未即时更新
    3 年前
    sharif_17  ·  在ReactJS中使用useState时,[…arr,addThisElement]和arr.push(addThisElement)之间有什么区别?
    3 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号