尝试在React / TypeScript应用中使用usetState时应用中断

Question

Expected

Being able to use useState to set an email and password var inside of a functional React component.

Then using onChange on the inputs to change those variables, then sent the results of those variables up to the parent class via the signIn function.

Results

There is a typescript error highlighted over the onChange , and the app breaks.

Code

import React, {useState} from 'react'

import {
  AuthArea,
  AuthInputs,
  CreateNewAccount,
  FunctionButton
} from '../../styles'

interface IProps {
  signIn(email: string, password: string): void
}

export default ({ signIn }: IProps) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <AuthArea>
      <h1>Sign In</h1>
      <AuthInputs>
        <input
          type="text"
          placeholder="Email"
          value={email}
          onChange={setEmail}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={setPassword}
        />
        <FunctionButton onClick={() => signIn(email, password)}>
          Sign In
        </FunctionButton>
        <a href="#">Forgot Password?</a>
      </AuthInputs>
      <CreateNewAccount>
        Create New Account
      </CreateNewAccount>
    </AuthArea>
  )
}

The error

(JSX attribute) React.InputHTMLAttributes.onChange?: ((event: React.ChangeEvent) => void) | undefined Type 'Dispatch>' is not assignable to type '(event: ChangeEvent) => void'. Types of parameters 'value' and 'event' are incompatible. Type 'ChangeEvent' is not assignable to type 'SetStateAction'. Type 'ChangeEvent' is not assignable to type '(prevState: string) => string'. Type 'ChangeEvent' provides no match for the signature '(prevState: string): string'.ts(2322) index.d.ts(1976, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps, HTMLInputElement>'

Answer 1

This is how you setState in onChange:

<input
     type="text"
     placeholder="Email"
     value={email}
     onChange={(e) => setEmail(e.target.value)}
/>
<input
     type="password"
     placeholder="Password"
     value={password}
     onChange={(e) => setPassword(e.target.value)}
/>

Answer 2

Another version with extracted out function and using currying method for re-usability is as below:

export default ({ signIn }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleChange = setterFunc => e => {
    const value = e.target.value;
    setterFunc(value);
  }

  return (
    <>
      <input
        type="text"
        placeholder="Email"
        value={email}
        onChange={handleChange(setEmail)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={handleChange(setPassword)}
      />
    </>
  )
}

Here's live version: https://stackblitz.com/edit/react-rf4bhw