React.js如何获取用户输入并将其存入数组？

可以保留Array.from(Array(...))的写法，同时正确获取每个输入框的值并存入数组。核心是用React状态管理输入数组（替代全局变量），并为每个输入框绑定对应索引的onChange事件，实现输入内容与数组元素的一一对应。

修改后的代码 #

import React, { useState } from 'react';
import '../Mentor/PageLayout.css'

function MentorQuiz() {
    // 用state管理输入数组，初始值包含原有数据
    const [inputList, setInputList] = useState(["one", "two"]);

    // 点击按钮添加新输入框：往数组中推入空字符串作为新输入框的初始值
    const handleAddInput = () => {
        setInputList(prevList => [...prevList, ""]);
    };

    // 根据索引更新对应位置的数组元素
    const handleInputChange = (index, value) => {
        setInputList(prevList => {
            const updatedList = [...prevList];
            updatedList[index] = value;
            return updatedList;
        });
        console.log(inputList.map((item, i) => i === index ? value : item));
    };

    return (
        <div className="App">
            <button onClick={handleAddInput}>添加输入框</button>

            {/* 保留Array.from写法，根据数组长度生成对应数量的输入框 */}
            {Array.from(Array(inputList.length)).map((_, index) => {
                return (
                    <input
                        key={index}
                        type="text"
                        value={inputList[index]}
                        onChange={(e) => handleInputChange(index, e.target.value)}
                    />
                );
            })}
        </div>
    );
}

export default MentorQuiz;

关键调整说明 #

• 替换全局数组为React状态：全局变量mainArray无法触发组件重新渲染，改用useState声明的inputList管理输入数据，确保状态变化时UI同步更新。
• 简化按钮逻辑：点击按钮直接往inputList中添加空字符串，输入框数量由数组长度决定，无需额外维护counter状态（若坚持保留counter，可让其与数组长度同步，但数组长度的方式更直观）。
• 绑定索引的输入事件：每个输入框通过索引关联数组元素，内容变化时精准更新对应位置的值，保证输入内容与数组数据的一致性。
• 保留Array.from写法：通过Array.from(Array(inputList.length))生成对应长度的空数组，再映射为输入框元素，完全满足你的写法要求。

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