React表单中如何通过单个输入同步更新两个关联字段？

你只需要修改handleChange方法，根据当前输入的字段名判断是否需要计算联动字段的值，同时用函数式更新获取最新的表单状态，避免闭包导致的状态不同步问题。

修改后的完整代码： #

import { useState } from 'react';

function YourFormComponent() {
  const [form, setForm] = useState({
    name: "",
    nameEng: "",
    type: "",
    priceKN: "",
    priceEUR: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    // 使用函数式更新，确保拿到最新的表单状态
    setForm(prevForm => {
      // 处理priceKN输入，自动计算priceEUR
      if (name === 'priceKN') {
        const calculatedEUR = value ? (Number(value) / 7.54).toFixed(2) : '';
        return {
          ...prevForm,
          priceKN: value,
          priceEUR: calculatedEUR
        };
      }
      // 处理priceEUR输入，自动计算priceKN
      else if (name === 'priceEUR') {
        const calculatedKN = value ? (Number(value) * 7.54).toFixed(2) : '';
        return {
          ...prevForm,
          priceEUR: value,
          priceKN: calculatedKN
        };
      }
      // 其他字段正常更新
      else {
        return {
          ...prevForm,
          [name]: value
        };
      }
    });
  };

  return (
    <div>
      {/* 其他表单字段示例 */}
      <input
        type="text"
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="名称"
      />
      <input
        type="text"
        name="nameEng"
        value={form.nameEng}
        onChange={handleChange}
        placeholder="英文名称"
      />
      <input
        type="number"
        name="priceKN"
        value={form.priceKN}
        onChange={handleChange}
        placeholder="价格(KN)"
      />
      <input
        type="number"
        name="priceEUR"
        value={form.priceEUR}
        onChange={handleChange}
        placeholder="价格(EUR)"
      />
    </div>
  );
}

export default YourFormComponent;

关键说明： #

• 函数式更新：用setForm(prevForm => ...)代替直接展开旧的form对象，确保每次更新都基于最新的状态，避免React状态更新异步性带来的错误。
• 数值转换与空值处理：判断输入值是否为空，空值时联动字段设为空字符串，避免显示NaN；使用toFixed(2)保留两位小数，符合价格的常规显示需求（可根据业务调整小数位数）。
• 分支逻辑：针对priceKN和priceEUR单独处理联动计算，其他字段保持原有更新逻辑，不影响表单其他功能。

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