更清洁的方式来节省参考?

时间:2019-10-24 19:21:25

标签: javascript reactjs formik

我们有几个这样的类,其中一些类通过其几个函数访问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>
    );
  }
}

0 个答案:

没有答案
相关问题