如何从用户输入事件中获取最后一个值并推送到数组 react.js

Question

I have an Input component that creates as many input tags as needed based on JSON data.

I'm using the onChange method in the input tag and passing the event into a function "handleChange" using contextAPI to record the values in a different component.

I'm trying to then push that value into an array but when doing so it pushes every event the user presses let's say the user types in 450, when pushing array it comes out as ["4", "45", "450], how would I get the last value user puts?

Input component:

  const { handleChange } = useContext(FormContext);

  return (
    <input
      id={`input-text${id}`}
      onChange={(e) => handleChange(id, e)}
      style={{
        position: "absolute",
        top: `${fieldsPosX}px`,
        left: `${fieldsPosY}px`,
        background: "blue",
        border: "black",
        height: "30px",
        maxWidth: "70px",
        width: "100%",
        zIndex: "40",
        color: "#fff",
        textAlign: "center"
      }}
      maxLength={maxLength}
      type={"text"}
    />
  );
}

export default Input;

handleChange function:

  const handleChange = (id, e) => {
    console.log(e.target.value);

    answers.push(e?.target?.value);
  };

Current output: ["4", "45", "450"]

Expected output: ["450"]

Answer 1

Maybe you can use a submit <button> as a trigger to push your user input to the array instead of just using the <input> . The onChange event track every change in the <input> , so every single change in there will trigger the handleChange() function. That's why everytime the user input a character it will trigger the handleChange() function.

Answer 2

[answers, e?.target?.value] 

use this instead of answers.push