在具有多个字段的自定义组件中使用 Yup 和 Formik

如何解决在具有多个字段的自定义组件中使用 Yup 和 Formik

我在 React 中有一个表单，其中包括一个用于输入密码的字段和一个用于确认密码的字段。很普通的东西。我将 Formik 和 Yup 与 Semantic UI React 一起用于我的表单/验证。我想将这两个字段分解为它们自己的组件，以便我可以在我的应用程序的多个位置重用它们。我无法弄清楚如何在可以放入表单的组件中使用 Formik 和 Yup。有很多用于编写 components with only a single field 的示例，如果我不想在我的组件中使用 Formik/Yup ，我可以轻松地做到这一点 - 但这有点违背了目的。

这里仅提取了相关的密码代码，让您了解我正在使用的内容。我希望能够将这个、验证和所有内容放到另一个表单中。

const initialValues = {
  password1: "",password2: ""
};

const passwordRex = /(?=.*[\d!@#$%^&]+)(?![.\n])(?=.*\w).*$/i;

const validationSchema = Yup.object().shape({
  password1: Yup.string()
    .label("Password")
    .min(8)
    .matches(passwordRex,"Password must include letters and at least one number or symbol")
    .required(),password2: Yup.string()
    // Ensures password2 matches password1. Sauce: https://github.com/formium/formik/issues/90#issuecomment-392571270
    .oneOf([Yup.ref("password1")],"Passwords must match")
    .required(),});

class Registration extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        component={({
// ...
        }) => {
                      <FormGroup widths="equal">
                        <FormField
                          error={touched.password1 && errors.password1}
                          required
                        >
                          <label>Password</label>
                          <Field
                            type="password"
                            name="password1"
                          />
                        </FormField>
                        <FormField
                          error={touched.password2 && errors.password2}
                          required
                        >
                          <label>Confirm Password</label>
                          <Field
                            type="password"
                            name="password2"
                          />
                        </FormField>
                      </FormGroup>
          );
        }}
      />
    );
  }
}