如何在输入的 onChange 事件中获取旧值？

Question

我在 React 中定义了一些输入。我正在为他们的 onChange 函数分配一个函数。我可以找到当前值。如何以最简单的方式获取旧值？

之所以要这个是因为我想求出这个新值和旧值的比值，做一些运算。

示例代码：

let onChange = (e) => {
    let newValue = e.target.value; // let oldValue = will be here     

}

<Input type="number"  onChange={onChange }></Input>

Answer 1

如果组件状态不需要旧值，使用如下的ref，可以改变它的初始值

const oldValueRef = React.useRef(0)

let onChange = (e) => {
    const oldValue = oldValueRef.current;
    let newValue = e.target.value; // let oldValue = will be here

    // after everything     
    oldValueRef.current = e.target.value;
}

<Input type="number" onChange={onChange }></Input>

Answer 2

你可以使用状态来做：

const [state, setState] = useState("");

let onChange = (e) => {
  let oldValue = state; 
  let newValue = e.target.value;
  setState(newValue)
  // your logic
};

<Input type="number" value={state} onChange={onChange}></Input>;

如何在输入的 onChange 事件中获取旧值？

How can I get old value in input's onChange event?

html

javascript

event-handling

dom-events

reactjs