React的input组件onChange事件中如何简单获取旧值？

核心思路是用useRef存储上一次的输入值，useRef的更新不会触发组件重渲染，非常适合用来留存不需要触发视图更新的历史状态，配合受控组件实现成本最低。

单输入框实现示例 #

import { useState, useRef } from 'react';

function YourComponent() {
  // 受控组件绑定的输入值状态，初始值可根据业务调整
  const [inputValue, setInputValue] = useState(0);
  // 用ref存储上一次的输入值，初始和状态初始值保持一致
  const prevValueRef = useRef(inputValue);

  const onChange = (e) => {
    const newValue = Number(e.target.value);
    // 直接从ref取旧值，注意要在更新ref前取值
    const oldValue = prevValueRef.current;

    // 你的比值计算逻辑直接在这里写即可
    const ratio = oldValue !== 0 ? newValue / oldValue : 0;
    // 后续业务逻辑

    // 先更新状态，再更新ref存储的旧值
    setInputValue(newValue);
    prevValueRef.current = newValue;
  }

  return <Input type="number" value={inputValue} onChange={onChange} />
}

多输入框实现示例 #

如果有多个输入框，把状态和ref改成对象格式存储即可：

import { useState, useRef } from 'react';

function YourComponent() {
  const [inputValues, setInputValues] = useState({
    field1: 0,
    field2: 0
  });
  const prevValuesRef = useRef(inputValues);

  const onChange = (e, fieldKey) => {
    const newValue = Number(e.target.value);
    const oldValue = prevValuesRef.current[fieldKey];
    
    const ratio = oldValue !== 0 ? newValue / oldValue : 0;
    // 后续业务逻辑

    setInputValues(prev => ({
      ...prev,
      [fieldKey]: newValue
    }));
    prevValuesRef.current[fieldKey] = newValue;
  }

  return (
    <>
      <Input 
        type="number" 
        value={inputValues.field1} 
        onChange={(e) => onChange(e, 'field1')} 
      />
      <Input 
        type="number" 
        value={inputValues.field2} 
        onChange={(e) => onChange(e, 'field2')} 
      />
    </>
  )
}

注意事项 #

• 取值逻辑一定要放在更新ref之前，顺序颠倒会拿到和新值一样的结果
• 数字类型输入要主动把e.target.value转成数字，避免字符串运算得到NaN
• 除法逻辑要加旧值为0的兜底判断，避免运行时报错

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