动态计算输入值 - React

Posted 2023-02-22

【中文标题】动态计算输入值 - React

【英文标题】：Dynamically Calculate Input values - React

【发布时间】：2021-03-27 10:11:46

【问题描述】：

我正在处理一个由用户填写的表单，并且应该根据输入的数据同时更新其他输入字段。例如，如果我们有 3 个输入字段，分别是数字 1、数字 2 及其总和。我们如何根据用户类型更新它们中的每一个？我当前实现的问题是它并不总是有效。如果一个字段 id 自动呈现并且我尝试手动更改它，那么一切都会停止。换句话说，应用程序没有考虑从公式计算的值，它们只是呈现在字段中。

import React,  useState  from 'react';
const Calculations = () => 

const [values,setValues]=useState(first:"",second:"",sum:"")
const [first,setFirst]=useState('')
const [second,setSecond]=useState('')
const [sum,setSum]=useState('')
const onChange=(e)=>
    let name=e.target.name;
    let value=e.target.value;
    const newValues = 
    ...values,
    [name]: value
 
setValues(newValues)
calcSum(newValues)
calcfirst(newValues)
calcSecond(newValues)



const calcSum = (newValues) => 
const  first,second = newValues;
const newSum = parseInt(first,10)+parseInt(second,10)
setSum(newSum)
 
const calcfirst = (newValues) => 
const  sum,second = newValues;
const newFirst = parseInt(sum,10)-parseInt(second,10)
setFirst(newFirst)
 
const calcSecond = (newValues) => 
const  sum,first = newValues;
const newSecond = parseInt(sum,10)-parseInt(first,10)
setSecond(newSecond)
 

return ( <form>
       <div style=display:"flex",flexDirection:"column">
        <label htmlFor="first">First</label>
        <input onChange=onChange defaultValue=first name='first' id="first" type="number"/>

        <label htmlFor="second">Second</label>
        <input onChange=onChange defaultValue=second name="second"  id="second" type="number"/>

        <label htmlFor="sum">Total</label>
        <input onChange=onChange defaultValue=sum id="sum" name="sum" type="number"/>


       </div>
    </form> );


export default Calculations;

【参考方案1】：

在测试您的代码后，我发现主要问题是每个输入的“defaultValue”属性。

根据official documentation here，“在组件挂载后更改 defaultValue 属性的值不会导致 DOM 中的值发生任何更新。”。因此，在第一次计算之后，您的输入被视为已安装，这就是您的代码第一次工作而不是之后工作的原因。

首先，您应该将“defaultValue”更改为“value”，但这会在您的代码中产生其他逻辑问题，并且不适用于这种简单的更改。

接下来，您应该更新您在 onChange 中输入的值，但是在没有条件的情况下使用函数 calcSum()、calcFirst() 和 calcSecond() 会产生其他问题。

const onChange=(e)=>
  let name=e.target.name;
  let value=e.target.value;
    const newValues = 
    ...values,
    [name]: value
   
  switch (name) 
    case 'first':
      setFirst(value)
      break;
    case 'second':
      setSecond(value)
      break;
    case 'sum':
      setSum(value)
      break;
  
  setValues(newValues)
  // calcSum(newValues)
  // calcfirst(newValues)
  // calcSecond(newValues)

那么，你需要建立一些优先条件，避免同时调用3个calc函数。

您也可以在不同的函数中设置每个值，然后执行其他操作。

希望对你有帮助。

【讨论】：

非常感谢您的清晰解释。现在，当我更改第一个或第二个时，总和更新没有问题。但正如你所说，我应该实现优先条件以避免同时调用多个函数。它发生在定义总和并且我更改其他两个值之一时。

没错。如果你遇到其他问题，我会密切关注这个......我在 reactjs 开始时遇到过很多类似的情况

您的解决方案是解决我的问题的良好开端。实际上，我正在处理 9 个输入字段，其中许多通过一些公式相互连接，并且有很多组合可以更新字段，并且很难跟踪。我选择这个例子是为了说明。