reactjs - 我想在我的项目中自定义条纹表单以做出反应

Question

我想在react js中使用条纹创建一个支付表单，后端在spring boot中我正在使用formik来获取表单数据和是的表单验证，因为我是新来的反应我需要帮助来定制条纹表单现在我正在做一些事情像这样

                     <Formik
                            enableReinitialize={true}
                            initialValues={RecurringPaymentSchema}
                            validationSchema={RecurringPaymentValidationSchema}
                            onSubmit={({ setSubmitting, resetForm, setErrors }) => {
                              this.handleSubmit(resetForm, setErrors);
                              setSubmitting(false);
                              //resetForm();
                            }}
                          >
                            <Form>
                              <div className="py-2">
                                <div className="custom-control custom-radio">
                                  <Field
                                    className="custom-control-input"
                                    name="monthly-plan"
                                    type="radio"
                                    value="monthly-subscription"
                                  />
                                  <label className="custom-control-label" for="monthly-plan">
                                    <strong>Monthly $9.99</strong>
                                    <br />
                                    <small className="text-muted">
                                      Pay $9.99 every month and get access to all premium features.
                                    </small>
                                  </label>
                                </div>
                                <div className="custom-control custom-radio mt-3">
                                  <Field
                                    checked=""
                                    className="custom-control-input"
                                    name="annually-plan"
                                    type="radio"
                                    value="annual-subscription"
                                  />
                                  <label className="custom-control-label" for="annually-plan">
                                    <strong>Yearly $49.99</strong>
                                    <span className="badge badge-primary ml-1">60% OFF</span>
                                    <br />
                                    <small className="text-muted">
                                      Pay $49.99 every year and get access to all premium features.
                                    </small>
                                  </label>
                                </div>
                              </div>
                              <input id="api-key" type="hidden" value="${stripePublicKey}" />
                              <div className="form-group">
                                <label className="font-weight-medium" for="card-element">
                                  Enter credit or debit card below
                                </label>
                                <div className="w-100">
                                  {/* A Stripe Element will be inserted here. */}
                                  <Elements stripe={stripePromise}>
                                    <CardElement
                                      id="card-element"
                                      options={CARD_ELEMENT_OPTIONS}
                                      onChange={this.handleError}
                                    />
                                  </Elements>
                                </div>
                              </div>
                              <div className="form-group">
                                <Field
                                  className="form-control"
                                  id="email"
                                  name="email"
                                  placeholder="Email Address"
                                  type="email"
                                />
                                <p className="errors">
                                  <ErrorMessage name="email" />
                                </p>
                              </div>
                              {/* Used to display Element errors. */}
                              <div
                                className="text-danger w-100"
                                id="card-errors"
                                role="alert"
                              ></div>
                              <div className="form-group pt-2">
                                <button
                                  className="btn btn-primary btn-block"
                                  id="submitButton"
                                  type="submit"
                                >
                                  Pay With Your Card
                                </button>
                              </div>
                            </Form>
                          </Formik>

现在我想验证条带以及我的单选按钮或其他表单元素使用是的，我的模式是

import * as Yup from 'yup';

export const RecurringPaymentSchema = {
  monthlyPlan: '',
  annuallyPlan: '',
  email: '',
};

export const RecurringPaymentValidationSchema = Yup.object().shape({
  email: Yup.string().required("Email can't be blank"),
});

标签： reactjsreact-reduxstripe-paymentsformikyup