React动态渲染组件：初始值填充与多输入值获取方案咨询

1. 页面加载时渲染带初始值的Input #

核心逻辑是用React状态管理Input的数值列表，将初始值数组作为状态的初始值，通过遍历状态数组渲染对应数量的Input组件，并为每个Input绑定值更新逻辑。

具体实现：

• 用useState定义状态，初始值传入给定的初始列表（如["Apple", "Mango", "Carrot"]）
• 遍历状态数组，为每个元素生成Input组件，绑定value为当前元素值，同时通过onChange事件更新对应位置的数组元素
• 为每个Input设置唯一key（示例用index+value组合，避免列表重排时的渲染异常）

2. 获取所有Input的输入值 #

所有Input的值都维护在状态数组中，直接访问该状态即可获取最新的所有输入值。可在需要的时机（如提交按钮点击、表单提交）直接读取状态数组。

完整代码示例 #

import { useState } from 'react';

function DynamicInput() {
  // 初始化状态，传入初始值列表
  const [inputValues, setInputValues] = useState(["Apple", "Mango", "Carrot"]);

  // 更新单个Input的值
  const handleInputChange = (index, e) => {
    const newValues = [...inputValues];
    newValues[index] = e.target.value;
    setInputValues(newValues);
  };

  // 新增空Input
  const addInput = () => {
    setInputValues([...inputValues, ""]);
  };

  // 获取所有输入值（示例用法）
  const getAllValues = () => {
    console.log("所有输入值：", inputValues);
    // 此处可执行提交、存储等业务逻辑
  };

  return (
    <div>
      {/* 渲染所有Input */}
      {inputValues.map((value, index) => (
        <input
          key={`input-${index}-${value}`}
          type="text"
          value={value}
          onChange={(e) => handleInputChange(index, e)}
          style={{ margin: '0 8px 8px 0' }}
        />
      ))}
      <br />
      <button onClick={addInput}>新增输入框</button>
      <button onClick={getAllValues} style={{ marginLeft: '8px' }}>获取所有值</button>
    </div>
  );
}

export default DynamicInput;

关键说明 #

• 状态更新：必须创建数组副本后修改，避免直接修改原状态数组（React状态遵循不可变原则）
• 组件复用：若初始值来自父组件props，可将useState初始值改为props.initialValues || []
• Key的稳定性：避免单纯使用数组索引作为key，当列表元素增删时可能引发不必要的组件重渲染

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