我怎样才能使这个 Formik 表单与自定义按钮一起工作我无法获得 handleSubmit 的值

Question

我正在学习 React.js 并且我有这个 Codesandbox 这是一个 Material-Ui 样板。我现在尝试一些东西，比如我想要在点击处理 Facebook 登录时登录 Facebook Button。

我阅读了文档，但看不到对这种情况的任何解释。即使 Codesandbox Material-UI 也表明这是一个好方法。

这是我试过的，看起来像这样：

    <Formik
                                initialValues={{
                                    email: 'demo@devias.io',
                                    password: 'Password123',
                                    facebook: 'dddd',
                                }}
                                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={(values, { setSubmitting }) => {
                                    setTimeout(() => {
                                        alert(JSON.stringify(values, null, 2));
                                        setSubmitting(false);
                                    }, 400);
                                }}
                            >
                                {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
                                    <form onSubmit={handleSubmit}>
                                        <Box mb={3}>
                                            <Typography color="textPrimary" variant="h2">
                                                Sign in
                                            </Typography>
                                            <Typography color="textSecondary" gutterBottom variant="body2">
                                                Sign in on the internal platform
                                            </Typography>
                                        </Box>
                                        <Grid container spacing={3}>
                                            <Grid item xs={12} md={6}>
                                                <Button
                                                    className={classes.Facebook}
                                                    fullWidth
                                                    startIcon={<FacebookIcon />}
                                                    onClick={handleSubmit}
                                                    size="large"
                                                    variant="contained"
                                                    name="facebook"
                                                    type="facebook"
                                                    value={values.facebook}
                                                >
                                                    SIGN in with Facebook
                                                </Button>
                                            </Grid>

.......

如图所示：

<Button
    className={classes.Facebook}
    fullWidth
    startIcon={<FacebookIcon />}
    onClick={handleSubmit}
    size="large"
    variant="contained"
    name="facebook"
    type="facebook"
    value='sdsadadadsadada'
>
    SIGN in with Facebook
</Button>

我设置了 type="facebook" 和 value='sdsadadadsadada 但是当我点击按钮时 onClick={handleSubmit} 没有在 handleSubmit 中显示这个值，它显示默认值喜欢：

我想要的是根据树类型、Facebook、Google 或电子邮件处理登录。我是否必须为 Facebook 和 Google 按钮分别创建一个 Button onClick 来处理这个问题？我做错了什么？

Answer 1

我找到了答案here。

基本上是这样的：

function FormContainer(props) {
  const [formType, setFormType] = useState(DEFAULT_FORM_TYPE);

  const handlerSubmit = (methodX, methodY) => async values => {
    if (formType === FORM_TYPE_X) {
      return await methodX(values);
    }
    return await methodY(values);
  };

  const submitFormType = (formTypeSubmited, handleSumitType) => () => {
    setFormType(formTypeSubmited, () => handlerSubmit());
  };

  return (
    <Formik
      onSubmit={handlerSubmit(props.saveToApiMethodX, props.saveToApiMethodY)}
      validate={values => props.validate(formType, values)}
    >
      {(values, handleSubmit, errors) => (
        <>
        <button onClick={submitFormType(FORM_TYPE_X, handlerSubmit)}>
        Method X
        </button>
        <button onClick={submitFormType(FORM_TYPE_Y, handlerSubmit)}>
        Method Y
        </button>
        </>
        )}
    </Formik>
  );
}

我怎样才能使这个 Formik 表单与自定义按钮一起工作我无法获得 handleSubmit 的值

How can I make this Formik form work with custom Buttons I can't get the values to get to handleSubmit

reactjs

formik