如何将Parent类粘贴到功能组件并通过withFormik访问它?

时间:2019-07-17 04:29:10

标签: javascript reactjs formik

我想创建一个简单的应用,该应用使用withFormik和yup作为验证。首先,我需要将某些值从父类粘贴到我的功能组件中,然后由于某些原因,当它们单击下一步按钮时,它们会通过回调函数返回给父类。

这是我的父班的一部分:

<Switch>
   <Route
     exact
     path="/register"
     render={() => <RegisterAccount data={this.state.account} parent={this} callback={(account)=>this.setState({account})} />}
   />
</Switch>

这是我的功能组件:

const RegisterStudent = ({values, errors, touched, setFieldValue, props, handleSubmit}) => ( 
    <FormikForm onSubmit={handleSubmit}>
          <Form.Group>
            <Field
              name="surname"
              type="text"
            />
            {touched.surname && errors.surname && <p>{errors.surname}</p>}

          <Button type="submit">Submit</Button>
      </FormikForm>
);


const FormikApp = withFormik({
    mapPropsToValues({ data}) {
        return {
            surname:     data.surname   || "",
        };
    },
    validationSchema: Yup.object().shape({
        surname: Yup.string()
            .min(1)
            .max(32)
            .required(),
    }),
    handleSubmit({parent, values, callback}) {
        // I have tried to set value back from here but seem like callback is not yet set nor the parent.
    }
})(RegisterStudent);

最困难的部分是,我真的不知道如何全局访问父级的数据粘贴。我试图在handleSubmit内部对其进行销毁,但我无法获取它。如果我能找到一种在全球范围内访问它的方法,那么我认为这将是一件好事。无论如何,请提出建议并解决此问题。谢谢。

0 个答案:

没有答案