如何使用Formik传递Props？

Question

将 Reactjs 与打字稿结合使用

我想将 useFormik 挂钩传递给组件道具。

这样做的原因是为了减少不必要的线路，增加重用。

我当前的代码

...
const formik = useFormik({
    initialValues: { userName: ''},
    validationSchema,
    onSubmit: (values) => {}
})

return (
  <Form>
    {/* A place to make a component. */}
    <Text
       id="userName"
       fullWidth
       label="Name"
       defaultValue={formik.values.userName}
       onChange={formik.handleChange}
       onBlur={formik.handleBlur}
       error={formik.touched.userName && Boolean(formik.errors.userName)}
       helperText={formik.touched.userName && formik.errors.userName}
    >
    {/* A place to make a component. */}
  </Form>
)

自定义组件，这是问题的重点。


interface props {
    id: string;
    formik : what, // How do I deliver the prop here?
  }

const TextFieldCustom = ({ id, formik }: props) => {
    return (
     <Text
         id={id}
         fullWidth
         label={id}
         defaultValue={formik.values.userName}
         onChange={formik.handleChange}
         onBlur={formik.handleBlur}
         error={formik.touched.userName && Boolean(formik.errors.userName)}
         helperText={formik.touched.userName && formik.errors.userName}
    >

  );
};

我的代码因你的回答而完成。

...
const formik = useFormik({
    initialValues: { userName: ''},
    validationSchema,
    onSubmit: (values) => {}
})

return (
  <Form>
    {/* A place to make a component. */}
    <TextFieldCustom id="username" formik={formik}/>
    {/* A place to make a component. */}
  </Form>
)

我想要你的好方案。

Answer 1

如果你想从子组件访问 formik 助手，你可以使用 useFormikContext。我觉得比较简单。

根据您的代码，我还建议使用 Formik 组件作为 Form 组件的父组件，因为它需要它，但这可能是另一回事。

我会这样做（请注意，我已将表单组件替换为表单 html 标记）：

父组件：

export interface IFormData {
  username: string;
}

const validationSchema = Yup.object().shape({
  userName: Yup.string()
    .required("Username required"),
});

const ParentComponent = () => {
  const formikConfig = useFormik({
    initialValues: { userName: "" },
    validationSchema,
    onSubmit: (values) => {},
  });

  return (
    <form onSubmit={formikConfig.handleSubmit}>
      <TextCompo id="id" />
    </form>
  );
};

export default ParentComponent;

子组件：

interface ITextCompoProps {
  id: string;
}

const TextFieldCustom = (props: ITextCompoProps) => {
  const { id } = props;
  const context = useFormikContext<IFormData>();

  return (
    <Text
      id={id}
      fullWidth
      label={id}
      defaultValue={context.values.userName}
      onChange={context.handleChange}
      onBlur={context.handleBlur}
      error={!!(context.errors.username && context.touched.username)}
      helperText={context.touched.username && context.errors.username}
    />
  );
};

export default TextFieldCustom;

如何使用Formik传递Props？

How to useFormik pass Props?

typescript

reactjs

formik