时间戳

首页 > 解决方案 > 如何将道具从 Formik 传递到渲染的表单？

reactjs - 如何将道具从 Formik 传递到渲染的表单？

问题描述

我有以下 FormikWrapper ，它返回一个 Formik 表单：

const FormikWrapper = (props) => {
  const { name } = props;  
  return (
    <Formik
      initialValues={{
        email: '',
        password: '',
      }}
      
      onSubmit={(values, { setSubmitting, props }) => {
        console.log('submitted', values);

      }}
    >
      {({ submitForm, isSubmitting, name }) => (
        <Form>
            <p>Form name is :{name}</p>
          <Field
            component={TextField}
            name="email"
            type="email"
            label="Email"
          />
          <br />
          <Field
            component={TextField}
            type="password"
            label="Password"
            name="password"
          />
          <Button
            onClick={submitForm}
          >
            Submit
          </Button>
        </Form>
      )}
    </Formik>
  );
}

export default FormikWrapper

我想通过将表单的名称传递给FormikWrapper's props 来设置它。如何将它从<Formik>呈现的表单模板中传递（以便Form name is: {name}填充）？

标签： reactjsformik

解决方案

找到了。name问题是我将var 与其他 var 一起传递

  {({ submitForm, isSubmitting, name }) => (
     <Form>
            <p>Form name is :{name}</p>

所以它变得不确定。

一旦我从那里删除它，就会name使用包装器作用域中的 var。

推荐阅读