React Typescript 中如何同时向表单提交函数传递 FormEvent 与遍历索引

你的柯里化函数逻辑是正确的，只需要在事件绑定时传入当前遍历的索引即可，同时需要修正原有代码中多处变量引用错误、状态共享、DOM ID重复的问题，完整修正方案如下：

1. 核心传参修正 #

你定义的onSubmit是柯里化函数，接收索引后返回真正的事件处理函数，因此在form的onSubmit绑定处，直接传入当前遍历的index即可：

<form onSubmit={onSubmit(index)}>

触发提交时，React会自动把FormEvent对象传入第二层函数的e参数，你可以在函数内同时拿到index和事件对象。

2. 其他问题修复 #

你的示例代码存在多处逻辑错误，会导致功能无法正常运行，一并修正：

• 移除全局共享的单表单项状态item，改为直接操作itemList对应索引的对象，避免多个表单输入同步问题
• 修正不存在的变量itemName、setfruit的引用错误
• 为每个遍历生成的input添加带索引的唯一ID，避免DOM ID重复冲突
• 为柯里化函数的index参数添加TS类型标注

3. 完整可运行代码 #

import { useState, FormEvent, ChangeEvent } from 'react';
import { Button } from 'antd'; // 如果你用的其他UI库替换对应导入即可

// 定义表单项类型
type ItemType = {
  Name: string
}

const defaultItem: ItemType = {
  Name: ""
}

export default function App() {
  const [itemList, setItemList] = useState<ItemType[]>([defaultItem, defaultItem]) // 初始化测试数据可自行调整

  // 对应索引的表单输入变更处理
  const onChange = (index: number) => (e: ChangeEvent<HTMLInputElement>) => {
    const newList = [...itemList]
    newList[index][e.target.name as keyof ItemType] = e.target.value
    setItemList(newList)
  }

  // 提交处理：同时拿到索引和提交事件
  const onSubmit = (index: number) => (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 这里可以直接拿到当前表单的索引和对应数据
    const currentFormData = itemList[index]
    console.log('提交的索引:', index, '提交的数据:', currentFormData)
    // 后续你的业务逻辑
  }

  return (
    <div>
      {itemList.map((item, index) => (
        <div id='submitted' key={index}>
          <form onSubmit={onSubmit(index)}>
            <label className='labels' htmlFor={`Name_${index}`}>Name</label>
            <input
              type="text"
              id={`Name_${index}`}
              name="Name"
              value={item.Name}
              onChange={onChange(index)}
            />
            <Button type="submit">Add Item</Button>
          </form>
        </div>
      ))}
    </div>
  )
}

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