React中handleSubmit事件类型定义问题：EventTarget无email/password属性

你遇到的类型错误是因为TypeScript默认将e.target推断为通用的EventTarget类型，它无法识别这个目标是包含email和password输入框的表单元素，所以会提示这两个属性不存在。下面是几种简单的解决方法：

方法1：直接使用已维护的state（最推荐） #

你已经通过useState维护了email和password的状态，提交时直接用这两个变量即可，完全不需要从事件对象中取值，代码修改后如下：

const handleSubmit = (e: FormEvent) => {
  e.preventDefault()
  const dataSubmit = { 
    email,
    password
  }
  dispatch(loginThunkCreator(dataSubmit))
}

这种方法既简洁又避免了类型问题，是最优解。

方法2：给FormEvent指定表单类型 #

将事件类型明确为FormEvent<HTMLFormElement>，让TypeScript知道目标是HTML表单元素，之后可以安全访问表单内的控件：

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  const form = e.target
  const dataSubmit = { 
    email: (form.elements.namedItem('email') as HTMLInputElement).value,
    password: (form.elements.namedItem('password') as HTMLInputElement).value
  }
  dispatch(loginThunkCreator(dataSubmit))
}

或者直接对e.target进行类型断言：

const handleSubmit = (e: FormEvent) => {
  e.preventDefault()
  const form = e.target as HTMLFormElement
  const dataSubmit = { 
    email: form.email.value,
    password: form.password.value
  }
  dispatch(loginThunkCreator(dataSubmit))
}

方法3：使用useRef绑定表单 #

通过useRef获取表单元素的引用，再从引用中读取输入值：

import { FormEvent, useState, useRef } from "react"

// ...

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const dispatch = useAppDispatch()
  const formRef = useRef<HTMLFormElement>(null)

  const isAuth = useAppSelector(state => state.isAuth)

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    if (!formRef.current) return
    const dataSubmit = { 
      email: formRef.current.email.value,
      password: formRef.current.password.value
    }
    dispatch(loginThunkCreator(dataSubmit))
  }

  // ...

  return (
    <div>
      <p className="menu"><NavLink to="/*">Menu</NavLink></p>
      <form ref={formRef} action="" onSubmit={handleSubmit} className='login-form form'>
        {/* 表单内容不变 */}
      </form>
    </div>
  )
}

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