我们有几个这样的类,其中一些类通过其几个函数访问this.form。在此示例中,handleClose()中需要this.form。 Formik确实使用render props(此示例未使用),但是我不知道在this.form = renderProps
中执行render()
是否比当前的ref={}
更干净?关于节省表格的更干净方法的任何建议还是可以的?
class FieldRowEditor extends PureComponent {
// This contains the Formik ref
form = null;
handleClose = () => {
const { submitForm, values } = this.form;
submitForm(values);
};
handleSubmit = values => this.props.onClose(values);
render() {
const { children, classes, initialValues, onClose, validationSchema, ...props } = this.props;
return (
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={this.handleSubmit}
validationSchema={validationSchema}
ref={node => {
this.form = node;
}}
>
<Popover
className={classes.modal}
anchorOrigin={{
vertical: 'center',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center'
}}
onClose={this.handleClose}
{...props}
>
<div className={classes.editRow}>{children}</div>
</Popover>
</Formik>
);
}
}