我想创建一个简单的应用,该应用使用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内部对其进行销毁,但我无法获取它。如果我能找到一种在全球范围内访问它的方法,那么我认为这将是一件好事。无论如何,请提出建议并解决此问题。谢谢。