React+Ts开发 onSubmit类型问题

328 阅读1分钟

前言

在跟着2020年的react项目教程的时候遇到这样的问题

export const LoginScreen = ()=>{

    //在这里报错,找不到 FormEvent 的类型声明文件
  const handleSubmit = ( event : FormEvent<HTMLFormElement> )=>{
    event.preventDefault();

  }
  return <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor='username'>用户名</label>
      <input type="text" id='username'/>
    </div>
    <div>
      <label htmlFor="password">密码</label>
      <input type="text" id='password'/>
    </div>
    <button type='submit'>登录</button>
  </form>
}

解决

export const LoginScreen = ()=>{

    //将这里的 FormEvent 类型改为 React.FormEvent就可以,可能是react对html的标签类型做了整理
  const handleSubmit = ( event : React.FormEvent<HTMLFormElement> )=>{
    event.preventDefault();

  }
  return <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor='username'>用户名</label>
      <input type="text" id='username'/>
    </div>
    <div>
      <label htmlFor="password">密码</label>
      <input type="text" id='password'/>
    </div>
    <button type='submit'>登录</button>
  </form>
}