React中如何实现两个相互依赖的输入表单字段的自动正确更新

• 两个输入框均为React受控组件，value属性与对应的state变量强绑定：data1对应第一个输入框，data2对应第二个输入框。你当前的输入事件逻辑中，修改第一个输入时仅更新了data2，没有同步更新data1，修改第二个输入时仅更新了data1，没有同步更新data2，因此当前操作的输入框内容无法同步你输入的内容。
• onChange事件绑定在input的父div上属于不合理的写法，事件直接绑定到input元素更符合React的设计逻辑，也能避免不必要的事件冒泡问题。

import { useState } from "react";

export default function App() {
  const [data1, setData1] = useState(0);
  const [data2, setData2] = useState(0);

  const inputEvent1 = (e) => {
    const currentVal = e.target.value;
    // 先更新当前输入对应的state
    setData1(currentVal);
    // 再计算更新另一个输入的state
    setData2((currentVal / 2).toString());
  };

  const inputEvent2 = (e) => {
    const currentVal = e.target.value;
    // 先更新当前输入对应的state
    setData2(currentVal);
    // 再计算更新另一个输入的state
    setData1((currentVal * 2).toString());
  };

  return (
    <form className="a">
      <div className="b">
        <h1 className="c">Data Changer</h1>
        <div className="">
          <div className="d">
            <p>Enter Data1:</p>
            <input
              name="dataField1"
              type="text"
              className="input"
              placeholder="Data1"
              value={data1.toString()}
              onChange={inputEvent1}
            />
          </div>
          <div className="e">
            <p>Enter Data2:</p>
            <input
              name="dataField2"
              type="text"
              className="input"
              placeholder="Data2"
              value={data2.toString()}
              onChange={inputEvent2}
            />
          </div>
        </div>
      </div>
    </form>
  );
}

如果需要处理非数字输入的异常场景，可以在计算前添加数值合法性校验，避免出现NaN的情况。

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