TypeScript中表单handleChange函数事件参数e的类型确定问题

1. 确定handleChange的事件参数类型 #

你的handleChange绑定到input和select的onChange事件，参数e的正确类型是React.ChangeEvent<HTMLInputElement | HTMLSelectElement>，这个联合类型能涵盖两种表单元素的事件对象：

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
  const { name, value } = e.target
  // ...后续逻辑
}

2. 修复setInfo的状态更新类型 #

当前setInfo的回调参数prev用了any，这会丢失类型检查。首先建议给useState设置初始值（因为Info的所有属性都是必填字符串），避免状态为undefined：

const [info, setInfo] = useState<Info>({
  studentName: '',
  email: '',
  time: '',
  subject: ''
})

之后更新状态时，prev会自动推导为Info类型，无需手动指定。同时要确保name是Info的合法键，通过类型断言约束：

setInfo(prev => {
  return { ...prev, [name as keyof Info]: value }
})

3. 更严格的类型约束（可选） #

如果想让TypeScript强制校验name必须是Info的属性，可以提前定义键类型：

type InfoKey = keyof Info

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
  const { name, value } = e.target
  const key = name as InfoKey
  setInfo(prev => ({ ...prev, [key]: value }))
}

完整优化后的代码 #

type Info = {
  studentName: string
  email: string
  time: string
  subject: string
}

const Schedual = () => { 
  // 给useState设置初始值，避免undefined
  const [info, setInfo] = useState<Info>({
    studentName: '',
    email: '',
    time: '',
    subject: ''
  })

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>{
    const {name, value} = e.target
    setInfo(prev => {
      return{...prev, [name as keyof Info]: value}
    })
  }

  const handleSchedule = (e: React.FormEvent) => {
    e.preventDefault()
    console.log(info)
  }

  return (
    <>
      <div>
        <Form title="Schedule Here" onSubmit={handleSchedule} isSelectVisible={true} onChange={handleChange}/>
      </div>
      <ButtonLink text="Back" path="/" icon={<TbArrowBackUp />} />
      <ButtonLink text="Issues" path="/issues" icon={<TbArrowForwardUp />} />
    </>
  )
}

export default Schedual

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