React/Formik 如何将按钮“提交”从“表单”块移动到页面上的另一个块？或者如何使用另一个按钮从表单中获取所有值？

Question

How can I move button 'submit' from 'form' block to another block on page?Or how can I use another button to get all values from my form?

<Formik
      initialValues={{
        street: "",
        secondName: "",
        password: "",
        confirmPassword: "",
        email: "",
        confirmEmail: ""
      }}
      validateOnBlur
      onSubmit={(values) => {
        console.log(values);
      }}
      validationSchema={validationsSchema}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        isValid,
        handleSubmit,
        dirty
      }) => (
        <div className={s.formikBody}>
          <p className={s.sizeBig}>
            <label htmlFor={`street`}>Street *</label>
            <br />
            <input
              className={cn(s.input)}
              type={`text`}
              name={`street`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.street}
            />
          </p>
          <p className={s.sizeSmall}>
            <label htmlFor={`secondName`}>secondName</label>
            <br />
            <input
              className={s.input}
              type={`text`}
              name={`secondName`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.secondName}
            />
          </p>
          <p className={s.sizeSmall}>
            <label htmlFor={`password`}>password</label>
            <br />
            <input
              className={s.input}
              type={`password`}
              name={`password`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
          </p>
          <p className={s.sizeSmall}>
            <label htmlFor={`confirmPassword`}>confirmPassword</label>
            <br />
            <input
              className={s.input}
              type={`password`}
              name={`confirmPassword`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmPassword}
            />
          </p>
          <p className={s.sizeSmall}>
            <label htmlFor={`email`}>email</label>
            <br />
            <input
              className={s.input}
              type={`email`}
              name={`email`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
          </p>
          <p>
            <label htmlFor={`confirmEmail`}>confirmEmail</label>
            <br />
            <input
              className={s.input}
              type={`email`}
              name={`confirmEmail`}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmEmail}
            />
          </p>
          ```{" "}
          <button
            disabled={!isValid && !dirty}
            onClick={handleSubmit}
            type={`submit`}
          >
            submit
          </button>
          <div>
            {touched.street && errors.street && (
              <p className={s.error}>{errors.street}</p>
            )}
            {touched.secondName && errors.secondName && (
              <p className={s.error}>{errors.secondName}</p>
            )}
            {touched.password && errors.password && (
              <p className={s.error}>{errors.password}</p>
            )}
            {touched.confirmPassword && errors.confirmPassword && (
              <p className={s.error}>{errors.confirmPassword}</p>
            )}
            {touched.email && errors.email && (
              <p className={s.error}>{errors.email}</p>
            )}
            {touched.confirmEmail && errors.confirmEmail && (
              <p className={s.error}>{errors.confirmEmail}</p>
            )}
          </div>
        </div>
      )}
    </Formik>

Answer 1

I made a solution for you as I understood your concern

https://codesandbox.io/s/step-form-stack-overflow-bhe3ib?file=/src/App.js

please check