获取 onChange 函数的最后一个值答案

【问题标题】：Get the last value of the onChange function获取 onChange 函数的最后一个值
【发布时间】：2023-02-04 06:18:29
【问题描述】：

//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}])}
               />
   )
}

我在警报中发回数据（在我点击“发送”按钮后），我得到的结果是这个

The data i m getting back

【问题讨论】：

标签： reactjs onchange

【解决方案1】：

看起来像那样因为你用过变化时支柱。每次击键都会对您的变量值状态从而逐个字母地添加一个对象。你可以做的是使用使用参考挂钩您的文本字段以获取值。您可以创建一个名为 inputRefs 的数组，该数组将存储这些引用并通过您的 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 变量并添加设置变量值给你的发送按钮功能。也重构它喜欢

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

这将获取文本框中的当前值。希望对小弟有所帮助。参考文档：https://reactjs.org/docs/hooks-reference.html#useref

【讨论】：

嘿，谢谢你的回答，在我的例子中，我只是将变量“montant”、“test”和“date”作为静态示例，我真正想做的是获取任意数量的变量（2 美元符号之间的任意字符串）用户编写的文本并为每个变量生成一个文本字段，以便用户可以输入它们的值，所以我认为这个解决方案对我的情况不起作用
我想我需要向 onChange 函数添加一些逻辑（但我真的不知道是什么）

【解决方案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;

【讨论】：