React开发：如何将动态添加的输入框的值推送至数组

修正后的完整代码如下：

import { useState } from 'react';
// 请确保已经正确引入TextField和Button组件，比如来自MUI等组件库
function FormPage({ setData }) {
  const [item, setItem] = useState([]);

  // 新增输入框逻辑
  const handleAddItem = () => {
    setItem(prev => [...prev, '']);
  };

  // 处理对应索引输入框的内容变更
  const handleItemChange = (index, newValue) => {
    setItem(prev => {
      const newItemList = [...prev];
      newItemList[index] = newValue;
      // 如果需要实时同步数据到父组件，可在此处调用 setData(newItemList)
      return newItemList;
    });
  };

  return (
    <div>
      {item.map((value, index) => (
        <TextField 
          key={index} 
          label="Item"
          value={value}
          onChange={(e) => handleItemChange(index, e.target.value)} 
        />
      ))}
      <Button onClick={handleAddItem}>Add one more item</Button>
    </div>
  )
}

核心修改逻辑 #

• 移除冗余的counter状态，直接通过item数组的长度控制输入框的渲染数量，新增输入框时仅需往数组追加空字符串即可，减少不必要的状态维护
• 将输入框改为受控组件，每个输入框的值和item数组对应索引的元素绑定，保证视图和状态始终同步
• 修正值更新逻辑：通过事件对象获取输入的最新值，仅更新对应索引位置的数组元素，解决原代码中每次输入都会往数组追加新元素的问题
• 补充JSX根节点，避免React语法报错
• 仅新增输入框的场景下使用index作为key是可行的，如果你后续需要支持删除、排序输入框的操作，建议给每个item设置唯一ID作为key值，避免出现渲染异常
• 所有输入框的最终值都会存储在item数组中，你可以在提交表单时直接把item传给setData，也可以在每次值变更时实时同步给父组件。

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