通过 Formik 向服务器发送数据

Question

我有 registerHandler 应该向服务器发送数据。

在 Formik 我有 onSumbit

                    <Formik
                        initialValues={{
                            firstName: '',
                            lastName: '',
                            email: '',
                            password:''
                        }}
                        validationSchema={SignupSchema}
                        onSubmit={(
                            values: Values,
                            {setSubmitting}: FormikHelpers<Values>,
                                **const registerHandler** = async () => {
                                    const authData = {
                                        email:values.email,
                                        password:values.password,
                                        returnSecureToken:true
                                    }
                                    try {
                                  const response = await axios.post('Link', authData)
                                        console.log(response.data)
                                    }catch (e){
                                        console.log(e)
                                    }
                                }

                        ) => {
                            setTimeout(async () => {
                                setSubmitting(false);
                            }, 500);
                        }}
                    >

下面有个按钮看不到registerHandler

<button type="submit" className='settings-button' onClick={registerHandler}>Register</button>

如何才能正确地传输到按钮 registerHandler？

Answer 1

您可以使用 Formik 的 onSubmit 属性绑定 registerHandler 函数：

const registerHandler = async (values, { setSubmitting }) => {
  const payload = {
    // make payload here using values
  }
  try {
    const response = await axios.post('write_url_here', payload)
    console.log(response.data)
  } catch (e) {
    console.log(e)
  } finally {
    setSubmitting(false)
  }
}

// in render function's return

<Formik
  initialValues={{
    firstName: '',
    lastName: '',
    email: '',
    password: '',
  }}
  onSubmit={registerHandler} // HERE
>
{(formik) => (
    <form onSubmit={formik.handleSubmit}>
    
      <label htmlFor="firstName">First Name</label>

      <input id="firstName" type="text" {...formik.getFieldProps('firstName')} />

      {formik.touched.firstName && formik.errors.firstName ? (
        <div>{formik.errors.firstName}</div>
      ) : null}

      <button type="submit" className='settings-button'>Register</button>

    </form>
  )}
</Formik>

请注意，您不需要将点击处理程序附加到 Register 按钮，因为它属于 submit 类型并且位于 form 内。所以这个按钮将自动“提交”表单，即调用 form 上的 onSubmit 将触发 formik.handleSubmit 并最终触发函数 registerHandler.

通过 Formik 向服务器发送数据

Send data to the server via Formik

reactjs

formik