Typescript to handle onsubmit and onchange in react

Question

I am trying to use typescript and react properly. Right now I am getting stuck using typescript to handle onChange and onSubmit events. I dont know what annotations and types to use. I found that in my SignUpForm component, using any type will remove the errors but I don't feel as this is best practice.

From DefinitelyTyped source code, I am supposed to use ChangeEventHandler<T> to handle <input> onchange but I don't know what Type(T) to use because Visual Studio Code says I cannot use .currentTarget or .target to retrieve the values I want.

For my handleSubmit method, I think I am supposed to use FormEventHandler but once again, I don't know what type to pass in. My text editor is also telling me I don't have access to .preventDefault() as well

SignUpPage.tsx

import React, { FormEventHandler, InputHTMLAttributes, EventHandler } from 'react';
import SignUpForm from './SignUpForm';

interface IProps {}    
interface IState {}

class SignUpPage extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      email: "",
    }
  }

  handleSubmit = (event: FormEventHandler<>): void =>  {
    event.preventDefault();
  }

  handleChange = (event: React.ChangeEventHandler<HTMLInputElement>): void => {
    const { value, name} = event.;
    this.setState({ [name]: value })
  }

  render() {
    return(
      <SignUpForm
        handleSubmit={ this.handleSubmit }
        handleChange={ this.handleChange }
      />
    );
  }
}


export default SignUpPage;

SignUpForm.tsx

interface IProps {}

const SignUpForm = ({ handleSubmit, handleChange }: { handleSubmit: any, handleChange: any} ): JSX.Element => (
  <form onSubmit={ handleSubmit }>
    <input 
      name="email" 
      type="email"
      onChange={ handleChange }>  
    </input>
  </form>
);

export default SignUpForm;

The subtle error is that you are trying to type the underlying events as handlers. The function itself would be a handler, but the event argument should be ChangeEvent or similar, not ChangeEventHandler. — Alexander Staroselsky, Dec 26 '19 at 20:18
@AlexanderStaroselsky So the correct type is `FormEvent` and `ChangeEvent`? — Liondancer, Dec 26 '19 at 20:24
That should work for the input, but form would probably need to be HTMLFormElement or similar — Alexander Staroselsky, Dec 26 '19 at 20:44
@AlexanderStaroselsky Thanks for the tips! Much appreciated! That did fix the problem! However, my callbacks in my functional component are typed `any` is this proper? As I was learning `typescript` I think I should avoid using `any` — Liondancer, Dec 26 '19 at 20:47
I feel it’s good practice to avoid using any when possible, I think the function itself would be of type ChangeEventHandler for the change event for example, with or without the generic type. You could try that but I’d have to try it myself to confirm. Basically try using what you originally had but for the type of the respective functions. — Alexander Staroselsky, Dec 26 '19 at 20:49
@AlexanderStaroselsky Yup that worked! I know the question is closed and marked as duplicate but I feel that the part 2 of my question is different than the possible duplicate. If you post an answer I will accept it! — Liondancer, Dec 26 '19 at 20:53

Typescript to handle onsubmit and onchange in react

0 Answers0