获取Onchange功能的最后值

Question

//let's say these are the 3 variables i got from the text
const varArray = ['montant', 'test','date']

//and here is where i want to store the name of the variable and the value the user typed in the
//text field
const [variableValues, setVariableValues] = useState([{name: '', value: ''}]);

//this is the what i m doing in order to solve the given problem
{
   varArrayCopy.map(
        variable =>
              <TextField
                    key={variable}
                    margin="dense"
                    label={variable}
                    fullWidth
                    variant="standard"
                    onChange={e => setVariableValues([...variableValues, {name: variable, value: e.target.value}])}
               />
   )
}

即时通知将数据发送回警报中（我单击“发送”按钮之后），结果我得到的是

数据我返回

Answer 1

看起来这样，因为您使用了 Onchange Prop。每种击键都会更改您的变量值状态，从而通过字母添加了一个对象。您可以做的是将 useref 用于文本字段以获取值。您可以创建一个名为InputRefs的数组，该数组将存储这些参考文献＆amp;只需循环穿过它们的vararraycopy.map

const montant = useRef(null);
const test = useRef(null);
const date = useRef(null);

const inputRefs = [montant, test, date]

{
   varArrayCopy.map(
        (variable, index) =>
              <TextField
                    key={variable}
                    margin="dense"
                    label={variable}
                    fullWidth
                    variant="standard"
                    ref={inputRefs[index]}
                    onChange={e => setVariableValues([...variableValues, {name: variable, value: inputRefs[index].current}])}
               />
   )
}

最后，删除Onchange变量，然后将 setVariable值添加到发送按钮函数。也像重构一样

setVariableValues([...variableValues, {name: variable,value:inputRefs[index].current}

这将在文本框中获取当前值。希望这对兄弟有帮助。请参阅文档： https：//reactjs.s.s.org/docs/hooks-reference-refers-reaks-reference-reference.html#html#-html#- useref

Answer 2

    To avoid multiple calls to a function with the onChange property in a 
    React input, debounce or throttle can be used to limit the number of 
    calls to the function.

    In this example, the function handleInputChange will be executed after 
    500 milliseconds after the text input stops. This ensures that the 
    function is executed only once after the text input has stopped.

    import React, { useState } from 'react';
    import { debounce } from 'lodash';

    const MyComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = debounce((value) => {
    // aquí va la lógica que se ejecutará después del tiempo establecido
    }, 500);

    return (
    <input
      type="text"
      value={inputValue}
      onChange={(event) => {
        setInputValue(event.target.value);
        handleInputChange(event.target.value);
          }}
        />
      );
    };

    export default MyComponent;