如何在 onClick3 中按下 onClick2 时获取输入更改值？

Question

onClick2 使状态接收更改的值。

然而，onClick3 只想在按下 onClick2 时传递更改后的状态值。

如何控制输入的变化值？

当输入值变为456时按下onClick3 是否可以获取 onChange 之前的值？

我的代码...

import React, { useRef, useState } from "react";

const App = () => {
  const [value, setValue] = useState("123");

  const onChangeInput = (e) => {
    setValue(e.target.value);
  };

  const onClick2 = () => {
    console.log(value);
  };

  const onClick3 = () => {
    // how to onclick2 preve
    console.log(value);
  };

  return (
    <div>
      <input type="text" onChange={onChangeInput} value={value} />
      <button onClick={onClick2}>Button1</button>
      <button onClick={onClick3}>Button2</button>
    </div>
  );
};

export default App;

Answer 1

你应该像这样使用 2 个 useState，一个用于 prevValue，一个用于 currentValue-

const [value, setValue] = useState("123")
const [prevValue, setPrevValue] = useState(value)

const onChangeInput = (e) => {
    setValue(e.target.value);
}

const onClick2 = () => {
    setPrevValue(value)
}

const onClick3 = () => {
    console.log('Previous : ', prevValue)
    console.log('Current : ', value)
}

当您单击 onClick2 btn 时，它将更新以前的值，当您单击 onClick3 btn 时，它将为您提供以前和更新后的值的输出。

# If your current value is 456

output: 
    Previous : 123
    Current : 456

只需添加此代码，您就会得到答案。

如何在 onClick3 中按下 onClick2 时获取输入更改值？

How can I get the input changed value when onClick2 is pressed in onClick3?

javascript

ecmascript-6

reactjs