React双输入框双向面积单位转换功能异常如何修复？

问题根因 #

• 两个输入框的value属性和绑定的state完全错位：第一个输入框（area单位）的value绑了inputs，但实际修改的是input state；第二个输入框（㎡单位）value绑了input，实际修改的是inputs state，导致值无法对应更新
• onChange转换逻辑写反：输入area的时候应该同步更新对应的㎡值，输入㎡的时候同步更新对应的area值，原逻辑完全颠倒
• onFocus清空操作的目标state错误，导致清空后没有对应到输入框显示的值

最终修改代码 #

import { useState } from 'react';

// 组件内部逻辑
const [areaVal, setAreaVal] = useState('');
const [sqmVal, setSqmVal] = useState('');
const EXCHANGE_RATE = 3.31; // 抽离转换系数方便后续修改

return (
  <div className="area_container">
    <input 
      name="area_p" 
      type="number" 
      onChange={(e) => {
        const val = e.target.value;
        setAreaVal(val);
        // 空值判断避免出现NaN，toFixed可保留指定小数位数，不需要可以删除
        setSqmVal(val ? (val * EXCHANGE_RATE).toFixed(2) : '');
      }} 
      onFocus={() => {
        setAreaVal('');
        setSqmVal('');
      }} 
      value={areaVal}
    />
    <p>area</p>
    <input 
      name="area_m" 
      type="number" 
      onChange={(e) => {
        const val = e.target.value;
        setSqmVal(val);
        setAreaVal(val ? (val / EXCHANGE_RATE).toFixed(2) : '');
      }}  
      onFocus={() => {
        setSqmVal('');
        setAreaVal('');
      }} 
      value={sqmVal}
    />
    <p>m<sup>2</sup></p>
  </div>
)

补充说明 #

如果不需要在获得焦点时清空两个输入框，仅清空当前聚焦的输入框，删除onFocus中对应另一个state的清空语句即可。

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