React动态生成输入框后，如何将各输入框最终值存入数组

你的核心问题是没有为每个动态生成的输入框维护独立的状态绑定，且未实现精准的索引式值更新逻辑，导致输入过程中每个字符的变化都被错误地追加到数组中。以下是修正后的代码：

import { useState, useEffect } from "react";

const MakeNewInput = () => {
    const [numInputs, setNumInputs] = useState(null);
    // 维护所有动态输入框的值数组
    const [inputValues, setInputValues] = useState([]);

    // 监听输入框数量变化，同步调整值数组长度
    useEffect(() => {
        if (numInputs === null) return;
        setInputValues(prev => {
            const newValues = [...prev];
            // 新增输入框时补全空值，减少时截断数组
            if (newValues.length < numInputs) {
                return newValues.concat(Array(numInputs - newValues.length).fill(""));
            } else {
                return newValues.slice(0, numInputs);
            }
        });
    }, [numInputs]);

    // 更新指定索引的输入框值
    const handleInputChange = (index, value) => {
        setInputValues(prev => {
            const newValues = [...prev];
            newValues[index] = value;
            return newValues;
        });
    };

    // 生成动态输入框
    const createInputs = () => {
        if (numInputs === null) return null;
        return Array.from({ length: numInputs }, (_, i) => (
            <input
                type="text"
                key={i}
                value={inputValues[i] || ""}
                onChange={(e) => handleInputChange(i, e.target.value)}
                placeholder={`输入框 ${i + 1}`}
            />
        ));
    };

    // 示例：打印最终数组
    const showResult = () => {
        // 转换为数字数组（如果需要）
        const numberArray = inputValues.map(val => +val);
        console.log(numberArray);
    };

    return (
        <div>
            <input
                type="number"
                value={numInputs || ""}
                onChange={(e) => setNumInputs(+e.target.value)}
                placeholder="输入生成数量"
            />
            <div>{createInputs()}</div>
            <button onClick={showResult}>查看结果数组</button>
        </div>
    );
};

export default MakeNewInput;

关键修正点： #

• 新增inputValues状态数组，专门存储每个动态输入框的值，每个输入框对应数组的一个索引位置
• 使用useEffect监听numInputs变化，自动同步数组长度，新增输入框补空值、减少时截断数组
• 每个动态输入框绑定对应索引的value和onChange事件，更新时仅修改数组中对应位置的值，避免无关追加
• 移除了原代码中无效的OK按钮（原按钮调用createInputs仅返回元素，无实际作用），新增查看结果的按钮演示如何获取最终数组

这样修改后，当你在2个输入框中输入524和96时，得到的数组就是[524, 96]，完全符合预期。

内容的提问来源于stack exchange，提问作者mostafa