How to get value from input field in React Typescript?

Question

How to get data from input field in React Typescipt?

Code:

import React, { useState } from 'react'

const AuthPage: React.FC = () => {
  const [form, setForm] = useState({
    email: '',
    password: '',
  })

  const changeHandler = (event: React.KeyboardEvent) => {
    setForm({ ...form, [event.target.name]: event.target.value })
  }

  const showState = () => {
    console.log(form)
  }

  return (
    <div className="row">
      <div className="col s6 offset-s3">
        <h1>URL Shortener</h1>
        <div className="card blue darken-4">
          <div className="card-content white-text">
            <span className="card-title">Authorization</span>
            <div>
              <div className="input-field">
                <input
                  placeholder="Enter Email"
                  id="email"
                  type="text"
                  name="email"
                  className="yellow-input"
                  onChange={changeHandler}
                />
              </div>
              <div className="input-field">
                <input
                  placeholder="Enter Password"
                  id="password"
                  type="password"
                  name="password"
                  className="yellow-input"
                  onChange={changeHandler}
                />
              </div>
            </div>
          </div>
          <div className="card-action">
            <button className="btn yellow darken-4" style={{ marginRight: 10 }}>
              Sign in
            </button>
            <button onClick={showState} className="btn grey lighten-1 black-text">
              Sign up
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AuthPage

This is error message:

"Property 'name' does not exist on type 'EventTarget'.  TS2339".
"Property 'name' does not exist on type 'EventTarget'.  TS2339".
and second error "Type '(event: React.KeyboardEvent) => void' is not assignable to type '(event: ChangeEvent<HTMLInputElement>) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent<Element>': altKey, charCode, ctrlKey, getModifierState, and 8 more.ts(2322)
index.d.ts(2101, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'"

@IsaToltar Usually setting types to any isn't a satisfactory solution, because in doing so you abandon type safety altogether. If your TypeScript code is full of anys, you might as well be using vanilla JavaScript. — Lionel Rowe
– Lionel Rowe, Commented May 20, 2020 at 16:52

Lionel Rowe · Accepted Answer · 2020-05-20 16:58:25Z

3

React.KeyboardEvent is a generic type. You can specify the element type to which it's attached, like this: React.KeyboardEvent<HTMLInputElement>.

In addition, you probably need to change event.target (which may or may not be the element on which the event handler is registered, due to event delegation) to event.currentTarget (which is guaranteed to be the element on which it's registered).

edited May 20, 2020 at 16:58

answered May 20, 2020 at 16:51

Lionel Rowe

6,2581 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get value from input field in React Typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related