React多输入框状态互控问题及演示示例

嘿，我完全懂你现在的困扰——操作多个输入框时，不知道怎么精准对应更新各自的状态，而不是只靠临时值做计算对吧？咱们一步步把这个问题搞定：

核心思路 #

给每个输入框加个唯一标识，让我们能判断当前是哪个输入框在触发变化，然后针对性地更新对应状态，同时根据汇率自动计算另一个输入框的值。

具体实现步骤 #

1. 重构状态结构
   别再只用tempValue啦，把需要跟踪的状态都明确拆分出来，比如基准货币值、目标货币值，还有汇率：

const [currencyState, setCurrencyState] = useState({
  baseAmount: '',
  targetAmount: '',
  exchangeRate: 1.07 // 举个例子，假设1美元可兑换1.07欧元
});

2. 给输入框添加区分标识
   给每个输入框加上name属性，用来明确区分是基准输入还是目标输入：

<input
  type="number"
  name="base"
  value={currencyState.baseAmount}
  onChange={handleInputChange}
  placeholder="基准货币"
/>
<input
  type="number"
  name="target"
  value={currencyState.targetAmount}
  onChange={handleInputChange}
  placeholder="目标货币"
/>

3. 编写通用的输入处理函数
   用一个函数搞定所有输入框的变化，通过event.target.name判断当前操作的输入框，然后更新对应状态并计算另一个值：

const handleInputChange = (e) => {
  const { name, value } = e.target;
  const { baseAmount, targetAmount, exchangeRate } = currencyState;

  let newBase = baseAmount;
  let newTarget = targetAmount;

  // 根据当前输入框的类型计算对应值
  if (name === 'base') {
    newBase = value || '';
    newTarget = value ? (parseFloat(value) * exchangeRate).toFixed(2) : '';
  } else if (name === 'target') {
    newTarget = value || '';
    newBase = value ? (parseFloat(value) / exchangeRate).toFixed(2) : '';
  }

  // 更新状态
  setCurrencyState({
    ...currencyState,
    baseAmount: newBase,
    targetAmount: newTarget
  });
};

额外优化提示 #

• 如果你的汇率是实时获取的，可以用useEffect监听汇率变化，自动重新计算两个输入框的数值；
• 用value || ''处理空输入，避免出现NaN的情况，提升用户体验；
• 要是后续扩展更多货币对，还可以把name属性扩展成包含货币类型的字段，让处理函数更通用。

这样一来，不管操作哪个输入框，都能精准更新对应的状态，同时自动计算另一个输入框的数值，完全替代之前的临时值方案啦！

内容的提问来源于stack exchange，提问作者ricardoNava