Antd <Input>新增后值未重置问题求助

问题根源 #

你的代码存在三个核心问题：

• 状态共用冲突：所有输入框（包括现有团队编辑和新增团队）共用同一个newTeam状态，导致新增团队后状态残留，输入框无法正确清空
• 非受控组件混用：现有团队的Input使用defaultValue而非受控的value，结合共用状态导致渲染逻辑混乱
• 事件参数错误：onPressEnter的参数传递错误，原代码中把事件对象当成了数组索引，导致编辑功能失效

修复方案 #

关键改动点 #

1. 拆分状态：单独用newTeamName管理新增团队的输入，和现有团队的编辑状态彻底分离
2. 改用受控组件：现有团队的Input绑定value={team}，确保输入内容与状态完全同步
3. 修正事件逻辑：
   • 编辑团队时直接根据索引更新对应项
   • 新增团队后立即清空newTeamName，让输入框自动恢复为空并显示占位符
4. 简化Key使用：新增输入框使用固定Key，避免不必要的组件重渲染

修复后的完整代码 #

import { useState } from 'react'
import { Input } from 'antd'

const TeamListCreator = () => {
  const [teamslist, setTeamslist] = useState(['Team1'])
  const [newTeamName, setNewTeamName] = useState('')

  // 更新指定索引的团队名称
  const updateTeam = (index, value) => {
    const updatedTeams = [...teamslist]
    updatedTeams[index] = value.trim()
    setTeamslist(updatedTeams)
  }

  // 添加新团队并清空输入框
  const addNewTeam = () => {
    const trimmedName = newTeamName.trim()
    if (trimmedName) {
      setTeamslist([...teamslist, trimmedName])
      setNewTeamName('')
    }
  }

  return (
    <div>
      <h2>Teams hinzufügen</h2>
      <p>Aktuell vorhanden Teams: {teamslist.length}</p>
      {teamslist.map((team, index) => (
        <Input
          key={index}
          value={team}
          onChange={(e) => updateTeam(index, e.target.value)}
          onPressEnter={() => updateTeam(index, team)}
          style={{ marginBottom: 8 }}
        />
      ))}
      <Input
        key="new-team-input"
        placeholder="Neues Team"
        value={newTeamName}
        onChange={(e) => setNewTeamName(e.target.value)}
        onPressEnter={addNewTeam}
      />
    </div>
  )
}

export default TeamListCreator

效果验证 #

• 编辑现有团队：输入内容实时同步到状态，回车确认后保存修改
• 添加新团队：输入名称回车后，新团队加入列表，新增输入框自动清空并显示占位符，无残留值问题

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