Question 253162 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Input OnChange Field

I’m developing a React application.
I’ve implemented an input field where users can enter values. However, I’m facing an issue with this input field. When users type, it displays intermediate values, such as "c," and "co," before showing the complete input, for example, "cow."

The reason I’ve stored the input as an array is that I have multiple instances of TextField generated in a loop, and I need to capture all the input values.

Here’s the relevant code snippet:

  <TextField
    id="standard-basic"
    label="Standard"
    variant="standard"
    value={inputValue}
    onChange={(e) => {
      handleInputValue(e.target.value); 
    }}
  />


  const [inputValue, setInputValue] = useState([]); 

  const handleInputValue = (inputSubmitted) => {
    setInputValue([...inputValue, inputSubmitted]);

  };

My goal is to store multiple input values from different TextFields while ensuring that the input field displays only the final complete value, avoiding the display of intermediate values.

How can I achieve this behaviour? to handle multiple input values in a loop?

Tags:

2

Answers


  1. 0

    I have an idea for your problem.
    Try using the useRef hook to store and update the array every time an onKeyDown event is received like the sample below:

    const ref = useRef([]); 

<TextField
        value={inputValue}
        onKeyDown={(e) => {
            handleInputValue(e.Key); 
        }}/>
const handleInputValue = (inputSubmitted) => {
    ref.current.push(inputSubmitted);
};

    useRef is a way to help you store values away from being re-rendered by the component.

    Sorry if my English is extremely bad.

    Login or Signup to reply.
  2. 0

    If you’re trying to hold multiple states without overlap you can try a Map instead of an Array.

    const [inputValue, setInputValue] = useState(new Map())

const handleInputValue = (id, inputSubmitted) => {
    setInputValue((p) => p.set(id, inputSubmitted))
}

// I know your implementation generates the TextField with a loop, but hardcoding 3 examples show the solution works on principle
return (
    <TextField
        id="standard-basic"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
    <TextField
        id="standard-basic1"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic1")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
    <TextField
        id="standard-basic2"
        label="Standard"
        variant="standard"
        value={inputValue.get("standard-basic2")}
        onChange={(e) => {
            handleInputValue(e.target.id, e.target.value)
        }}
    />
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search