reactjs - React FormEvent 表单输入 Prop 类型

Question

如何为表单输入创建类型？

const Index = () => {
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    console.log(e.currentTarget.elements.email)
  }

  return (
    <Layout>
      <form onSubmit={handleSubmit}>
        <input name='email' type='email' autoComplete='email' required />
        <input name='password' type='password' autoComplete='password' required />
        <button type='submit'>Login</button>
      </form>
    </Layout>
  )
}

类型错误:

Property 'email' does not exist on type 'HTMLFormControlsCollection'.

Answer 1

在这里FormEvent<HTMLFormElement>将给出一个数组列表为 HTMLFormControlsCollection .

因此，当您尝试接收这样的电子邮件时 e.currentTarget.elements.email它抛出错误，

Property 'email' does not exist on type 'HTMLFormControlsCollection'.

所以要获取电子邮件的值，您需要获取数组中的电子邮件元素作为

e.currentTarget.elements[0] (因为电子邮件是第一个元素)

所以现在我们得到了电子邮件输入元素，因此我们将其分配为 HTMLInputElement .. 并获得值(value)使用，

console.log((e.currentTarget.elements[0] as HTMLInputElement).value);

工作示例:

https://codesandbox.io/s/react-with-typescript01-37jc4

更新:

如评论部分所述，我已在您也可以使用的地方进行了此更新，

console.log((e.currentTarget.elements.namedItem('email') as HTMLInputElement).value);

获取电子邮件值.. 但这里是从我用 [0] 描述的数组集合中获取电子邮件值..

更新的 Codesandbox

https://codesandbox.io/s/react-with-typescript01-26www