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

问题描述

我尝试应用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,setFieldValue,values,}) => (
    <FormikForm autoComplete="off" novalidate>
      <SettingsWrapper
        title="Profile settings"
        dirty={dirty}
        handleSubmit={handleSubmit}
        isSubmitting={isSubmitting}
        resetForm={resetForm}
      >
        [...]
      </SettingsWrapper>
    </FormikForm>
  )}
</Formik>;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）