通过handleSubmit函数向下传递Formik组件状态

时间:2019-06-02 22:54:40

标签: reactjs forms state formik

我已经使用withFormik制作了一个Formik表单。在我的handleSubmit中,我触发了一个带有几种情况的SubmitForm函数,每种情况(如果成功)都需要在formik组件中显示一条消息。是否可以在handleSubmit函数中更改多个状态实例?

它需要能够处理多个状态

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    firstName: props.firstName || '',
    ...
  }),
  validationSchema: yup.object().shape({
    firstName: yup.string().required('Please enter your first name'),
   ...
  }),
  handleSubmit: (values, formikBag) => {
    submitForm('pass state here?');
    }
  },
});

const BusinessFundingForm = ({
  values,
  isSubmitting,
  errors,
  handleBlur,
  handleChange,
  handleSubmit,
  touched,
  data,
}) => {

  return (
        <Form className="form" id="form-id">
          <Row>
            <Col xs={12} sm={6}>
              <InputField
                id="first-name"
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="First Name"
                label="First Name"
              />
              {errors.firstName &&
                touched.firstName && <Error>{errors.firstName}</Error>}
            </Col>
           ...
          </Row>

          <Row>
            <ButtonWrapper>
              <Button
                type="submit"
                tall
                onClick={handleSubmit}
                varianttype={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                    ? 'disabled'
                    : 'outline'
                }
                disabled={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                }
                text="Submit →"
              />
            </ButtonWrapper>
          </Row>
        </Form>
        <Error1 display={false} />
        <Error2 display={false} />
      </FormGrid>
    </Element>
  );
};

export default formikEnhancer(BusinessFundingForm);

0 个答案:

没有答案