reactjs - React FormEvent<HTMLFormElement> form input props typer

Hur gör man typer för formulärinmatningar?

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>
  )
}

Typfel:

Egenskapen 'email' finns inte på typen 'HTMLFormControlsCollection'.

Svar #1

Här FormEvent<HTMLFormElement> kommer att ge en arraylista som HTMLFormControlsCollection.

Så när du försöker få e-postadressen på detta sätt e.currentTarget.elements.email så kastas felet som,

Egenskapen 'email' finns inte på typen 'HTMLFormControlsCollection'.

Så för att få värdet av e-post måste du hämta e-postelementet inuti en array som

e.currentTarget.elements[0] (eftersom e-post är det första elementet)

Så nu har vi e-postinmatningselementet och låt oss därför tilldela det som HTMLInputElement.. och för att få värdet, använd,

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

Arbets exempel:

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

Uppdatering:

Som nämnts i kommentarsfältet har jag gjort denna uppdatering som du också kan använda,

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

för att få e-postvärdet.. Men här, för att få e-postvärdet från array-samlingen som jag har beskrivit med [0] ..

Uppdaterad Codesandbox

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

Svar #2

Om du vill referera till elementet kan du använda e.currentTarget.elements[0] eller e.currentTarget.elements.namedItem('email')

och sedan kan du bara komma åt värdet.

t.ex.

const emailElement = e.currentTarget.elements.namedItem('email') as HTMLInputElement
console.log(emailElement.value)

Referenser: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem

Relaterade artiklar