React迭代输入字段共享onChange函数无法获取完整输入值问题

问题现状 #

目前能根据输入的selectCount生成对应数量的输入框，但输入内容会被拆成单个字符塞进optionArr，没法把每个输入框的完整内容作为Select选项保存。

问题根源 #

• handleInputValueChange没接收你传入的索引i，每次输入都往数组末尾追加新值，导致每个字符都被单独存储。
• 给selectCount赋值时直接用了字符串类型的输入值，后续循环逻辑容易出现异常。
• widgetArr是静态生成的，和selectCount状态未绑定，数量变化时输入框列表无法正确更新。

修正后的完整代码 #

import { useState } from 'react';

const DynamicSelect = () => {
    // 存储每个输入框的选项值，数组索引对应输入框位置
    const [optionArr, setOptionArr] = useState([]);
    // 存储选项数量，确保为数字类型
    const [selectCount, setSelectCount] = useState(0);

    // 处理输入框内容变化，接收事件和当前输入框索引
    const handleInputValueChange = (event, index) => {
        const updatedArr = [...optionArr];
        updatedArr[index] = event.target.value;
        setOptionArr(updatedArr);
    };

    // 处理选项数量输入，转换为数字类型并同步调整选项数组长度
    const handleCountChange = (event) => {
        const count = parseInt(event.target.value, 10);
        const validCount = isNaN(count) ? 0 : count;
        setSelectCount(validCount);

        const updatedOptions = [...optionArr];
        if (validCount > updatedOptions.length) {
            // 新增输入框时补上空字符串占位
            updatedOptions.push(...Array(validCount - updatedOptions.length).fill(''));
        } else {
            // 减少数量时截断数组
            updatedOptions.splice(validCount);
        }
        setOptionArr(updatedOptions);
    };

    return (
        <div>
            <label>输入选项数量:</label>
            <input
                type="number"
                onChange={handleCountChange}
                placeholder="选项数量"
                value={selectCount}
            />
            <label>输入选项内容:</label>
            {/* 直接根据selectCount动态生成输入框，无需额外维护widgetArr */}
            {Array.from({ length: selectCount }).map((_, index) => (
                <div key={index}>
                    <input
                        id={`option-${index}`}
                        onChange={(e) => handleInputValueChange(e, index)}
                        placeholder="输入选项"
                        value={optionArr[index] || ''}
                    />
                </div>
            ))}
            {/* 预览生成的下拉选择框 */}
            {selectCount > 0 && (
                <select>
                    {optionArr.map((opt, idx) => (
                        <option key={idx} value={opt}>
                            {opt || '未填写'}
                        </option>
                    ))}
                </select>
            )}
        </div>
    );
};

export default DynamicSelect;

关键修改说明 #

• 移除了独立的widgetArr，直接在渲染时用Array.from生成输入框，保证输入框数量与selectCount状态完全同步。
• handleInputValueChange现在接收索引参数，通过修改数组对应位置的值更新状态，确保每个输入框的内容对应数组中的单个项。
• 给输入框添加value属性，实现受控组件，保证输入框内容与optionArr状态一致。
• 处理选项数量时将输入值转为数字，同时同步调整optionArr长度，避免新增输入框时索引越界、减少数量时残留无效数据。

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