如何在react js中獲得正確的輸入變量值？

Question

我是 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>
  );
}

范圍

Answer 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>

這將導致您無法獲得您的 Age 和 RHR 值，從而無法完成計算。

Answer 2

您可以使用像這樣定義表單狀態

const [formData, setFormData] = useState({ Age: 0, RHR: 0, });

更改字段的事件

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

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

您可以創建一個表單並具有以下提交事件

onSubmit={onFormSubmit}