如何在 React js 中获取正确的输入变量值？答案

【问题标题】：How to get a proper value of input variable in react js?如何在 React js 中获取正确的输入变量值？
【发布时间】：2021-09-17 15:18:28
【问题描述】：

我是 React JS 的新手。我正在尝试根据用户面部表情确定用户目标心率。该应用程序要求用户输入年龄和休息心率以根据强度级别计算 THR 区域。例如，低电平的公式为 0.2*(220-Age-RHR)+(RHR)。但是当我完成了用户输入计算时，RHR 值并没有成功地被求和到计算中：

function App() {
  const [Age,setAge]=useState(null);
  const [RHR,setRHR]=useState(null);
  const [print,setPrint]=useState(false);

  function getAge(Age)
  {
    setAge(Age.target.value)
  }
  function getRHR(RHR)
  {
    setRHR(RHR.target.value)
  }

  if (print === true){
    var LLTHR = 0.2*(220-Age-RHR)+(RHR);
    var LMTHR = 0.4*(220-Age-RHR)+(RHR);
    var LVTHR = 0.6*(220-Age-RHR)+(RHR);
    var LHTHR = 0.85*(220-Age-RHR)+(RHR);
    var UHTHR = 220-Age;
  }
return (
    <div>
      <thrRange />
    <div className="App"><h1>THR Range Detector Application</h1>
    <input 
            type="text" 
            name="Age" 
            id="Age"
            placeholder="Enter Age here..." 
            onChange={getAge}
        ></input>
        <div>
        <input 
            type="text" 
            name="RHR" 
            id ="RHR"
            placeholder="Enter RHR here..."
            onChange={getRHR}
        ></input>
        <div>
            <input type="submit" value="Calculate" onClick={()=>setPrint(true)}/>
        </div>
        {
          print?
          <h2>Low THR = {LLTHR+RHR} to {LMTHR+RHR}</h2>
          :null        
        }
        {
          print?
          <h2>Moderate THR = {LMTHR} to {LVTHR}</h2>
          :null  
        }
        {
          print?
          <h2>Vigorous THR = {LVTHR} to {LHTHR}</h2>
          :null        
        }
        {
          print?
          <h2>High THR = {LHTHR} to {UHTHR}</h2>
          :null  
        }</div></div>
  );
}

THRrange

【问题讨论】：

感谢您的帮助。事实证明，该值采用字符串的形式，并且总和计算实际上是附加字符串，但是在执行 - 和 * 运算符时，它与字符串值配合得很好。所以我已经将新的 setRHR 设置为 setRHR(parseInt(RHR.target.value))

标签： javascript node.js reactjs web-applications object-detection

【解决方案1】：

我想你错过了value attr。你的input 标签。

        <input 
            type="text" 
            name="Age" 
            id="Age"
            placeholder="Enter Age here..." 
            value={Age}
            onChange={getAge}
        ></input>

        <input 
            type="text" 
            name="RHR" 
            id ="RHR"
            placeholder="Enter RHR here..."
            value={RHR}
            onChange={getRHR}
        ></input>

这将导致您无法获得年龄和RHR的值，从而无法完成计算。

【讨论】：

感谢您的帮助。事实证明，该值采用字符串的形式，并且总和计算实际上是附加字符串，但是在执行 - 和 * 运算符时，它与字符串值配合得很好。所以我将新的 setRHR 设置为setRHR(parseInt(RHR.target.value)) 并且计算顺利
如果真的对你有帮助，请选择我的正确答案。

【解决方案2】：

你可以像这样定义表单状态

const [formData, setFormData] = useState({ 年龄：0，相对心率：0， });

更改您的字段的事件

onChange={(e) => setFormData({ ...formData, Age: e.target.value })}

onChange={(e) => setFormData({ ...formData, RHR: e.target.value })}

您可以创建一个表单并具有以下提交事件

onSubmit={onFormSubmit}

【讨论】：