有没有办法在formik onSubmit 之前运行onClick 事件？答案

【问题标题】：Is there any way to run an onClick event before a formik onSubmit?有没有办法在formik onSubmit 之前运行onClick 事件？
【发布时间】：2021-10-22 10:44:41
【问题描述】：

我正在尝试使用以下提交按钮创建登录页面

<Button
  color="primary"
  disabled={isSubmitting}
  fullWidth
  size="large"
  type="submit"
  variant="contained"
  onClick={() => { login(values.email, values.password); }}>
  Sign in
</Button>

登录逻辑如下所示

const login = async (email, password) => {
  try {
    const user = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    console.log('User: ', user);
    authenticated = true;
    console.log('Authenticated: ', authenticated);
  } catch (error) {
    console.log('Error: ', error);
    authenticated = false;
  }
};

我的 formik 组件是这样的

<Formik
  initialValues={{
    email: '',
    password: ''
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
    password: Yup.string().max(255).required('Password is required')
  })}
  onSubmit={() => {
    console.log('Authenticated: ', authenticated);
    if (authenticated === true) {
      navigate('/app/dashboard', { replace: true });
    }
  }}
>

我的想法是获取提交按钮的 onClick，在 onSubmit 运行之前运行登录逻辑，这会将 authenticated 设置为 true 并允许用户被重定向到 Dashboard.js。目前，onSubmit 似乎在 onClick 之前运行，导致 authenticated 具有其默认值 false，因此不会将用户重定向到仪表板。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

由于你的登录函数是一个异步函数，它返回一个承诺，因此 onSubmit 内部的登录是异步运行的。

您可以在onSubmit 中调用login 函数，但必须等待promsie 完成

例如：

<Formik
  initialValues={{
    email: '',
    password: ''
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
    password: Yup.string().max(255).required('Password is required')
  })}
  onSubmit={() => {
    login(email, password)
    .then(() => {
      console.log('Authenticated: ', authenticated);
      if (authenticated === true) {
        navigate('/app/dashboard', { replace: true });
      }
    })
    .catch((error) => {
       // handle error
    })
  }}
>

除了在作用域之外设置变量authenticated，您还可以简单地从登录函数返回并在承诺成功处理程序中使用它。

const login = async (email, password) => {
  try {
    const user = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    console.log('User: ', user);
    return true
  } catch (error) {
    console.log('Error: ', error);
    throw error
  }
};

  onSubmit={() => {
    login(email, password)
    .then((isAuthenticated) => {
      console.log('Authenticated: ', isAuthenticated);
      if (isAuthenticated === true) {
        navigate('/app/dashboard', { replace: true });
      }
    })
    .catch((error) => {
       // handle error
    })
  }}

请阅读并了解有关 javascript 承诺、异步 javascript 及其工作原理的更多信息。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

【讨论】：