需要两次单击“保存”按钮

Question

我尝试应用DRY并向上移动SaveButton。但是，无论何时执行此操作，都必须单击两次保存按钮才能将其触发。我认为它与const SaveButton = () => (有关，但是我还不知道如何解决它。

const SettingsWrapper = ({
  children,
  title,
  handleSubmit,
  isSubmitting,
  dirty,
  resetForm,
}) => {
  const classes = useStyles();

  const SaveButton = () => (
    <Button
      type="submit"
      variant="contained"
      color="primary"
      classes={{
        root: clsx(classes.saveButton, {
          [classes.saveButtonDirty]: !dirty,
        }),
        disabled: isSubmitting && classes.saveButtonDisabled,
      }}
      disabled={isSubmitting || !dirty}
      onClick={handleSubmit}
    >
      Save
      {isSubmitting && (
        <CircularProgress
          size={20}
          thickness={5}
          color="inherit"
          className={classes.saveButtonProgress}
        />
      )}
    </Button>
  );

  return (
    <>
      <Fade in={dirty}>
        <Grid
          className={classes.saveBar}
          container
          justify="space-between"
          alignItems="center"
        >
          <Grid>
            <Typography
              className={classes.unsavedChanges}
              color="textSecondary"
              variant="button"
            >
              Unsaved changes
            </Typography>
          </Grid>
          <Grid>
            <Button
              variant="contained"
              color="default"
              onClick={resetForm}
              className={classes.discardButton}
            >
              Discard
            </Button>
            <SaveButton />
          </Grid>
        </Grid>
      </Fade>
      <Grid item className={classes.gridDivider}>
        <Typography variant="h1">{title}</Typography>
      </Grid>
      {children}
      <Grid item className={clsx(classes.gridDivider, classes.actionButton)}>
        <SaveButton />
      </Grid>
    </>
  );
};

export default SettingsWrapper;

编辑：父级组件

<Formik
  initialValues={{[…]}}
  onSubmit={onSubmit}
  validateOnBlur={false}
  validateOnChange={false}
>
  {({
    dirty,
    handleSubmit,
    isSubmitting,
    resetForm,
    setFieldValue,
    values,
  }) => (
    <FormikForm autoComplete="off" noValidate>
      <SettingsWrapper
        title="Profile settings"
        dirty={dirty}
        handleSubmit={handleSubmit}
        isSubmitting={isSubmitting}
        resetForm={resetForm}
      >
        [...]
      </SettingsWrapper>
    </FormikForm>
  )}
</Formik>;