javascript - 使用 TypeScript 处理 Formik 提交

Question

我已经使用纯 Javascript 在 React 中成功编写了一个登录组件。我现在想将此组件转换为 TypeScript。我已经定义了一些类型，还加入了一些“any”，只是为了最初编译。不幸的是，我的提交按钮中的 onClick 参数引发了以下错误：

TS2322：类型 '(e?: FormEvent | undefined) => void' 不可分配给类型 '(event: MouseEvent<HTMLElement, MouseEvent>) => void'。

以下是相关代码：

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props) {
    super(props);

    this.login = this.login.bind(this);
  }

  async login(values) {
    const user = {
      email: values.email,
      password: values.password,
    };

    const query = `mutation userLogin(
      $user: UserLoginInputs!
    ) {
      userLogin(
        user: $user
      ) {
        token
      }
    }`;

    const data: any = await graphQLFetch(query, { user });
    if (data && data.userLogin.token) {
      const decoded: any = jwt.decode(data.userLogin.token);
      const { onUserChange } = this.props;
      onUserChange({ loggedIn: true, givenName: decoded.givenName });
      const { history } = this.props;
      history.push('/');
    }
  }

  render() {
    return (
      <Formik
        onSubmit={this.login}
        validationSchema={loginSchema}
        initialValues={{
          email: '',
          password: '',
        }}
      >
        {({
          handleSubmit,
          handleChange,
          values,
        }) => (
          <Card>
            <Card.Body>
              <Form>
                <Form.Group>
                  <Form.Label>E-mail</Form.Label>
                  <Form.Control
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                  />
                </Form.Group>
                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    name="password"
                    value={values.password}
                    onChange={handleChange}
                  />
                </Form.Group>
              </Form>
              <Button
                type="button"
                variant="primary"
                onClick={handleSubmit}
              >
                Submit
              </Button>
            </Card.Body>
          </Card>
        )}
      </Formik>
    );
  }
}

我是 TypeScript 的新手，当登录函数没有明确引用其中任何一个时，我不完全理解为什么会发生关于e与event的错误。有人可以帮我为我的 handleSubmit 函数（又名登录）分配类型吗？

标签： javascriptreactjstypescriptformik