Question

我在提交来自上级组件的表单时遇到问题。我下面有这样的代码。当用户按下EditIcon时，onSubmit函数会自动触发，而当我从IconButton中删除该类型时，它不会执行该操作，只会触发一次。但是更大的问题是：在Chrome中，它会触发，但editWindow保持打开状态，而在Firefox中，它关闭。我不知道错误发生在哪里，也不知道为什么会发生。

编辑组件：

  state = {
    newForm: new FormData()
  };

  handleFormSave = event => {
    this.props.onSubmit(this.props.sendDataToRedux(this.state.newForm));
    this.props.closeEditWindow();

  };

  topButtons = () => {
    const { toggleEditMode, editMode } = this.props;
    if (editMode) {
      return (
        <Fragment>
          <IconButton type="submit" form={this.props.formID}>
            <DoneIcon />
          </IconButton>
          <IconButton onClick={toggleEditMode}>
            <ClearIcon />
          </IconButton>
        </Fragment>
      );
    } else {
      return (
        <Fragment>
          <IconButton onClick={toggleEditMode}>
            <EditIcon />
          </IconButton>
          <IconButton onClick={this.handleDelete}>
            <DeleteIcon />
          </IconButton>
        </Fragment>
      );
    }
  };

  render() {
    const {
      open,
      onClose,
      editMode,
      FormComponent,
      extraInfo,
      formID
    } = this.props;
    return (
      <Drawer anchor="right" open={open} onClose={onClose}>
        <AppBar position="static">
          <Toolbar>
            <Grid container>
              <Grid item style={{ flexGrow: 1 }}>
                <Typography>Details</Typography>
              </Grid>
              <Grid item>{this.topButtons()}</Grid>
            </Grid>
          </Toolbar>
        </AppBar>
        <div>
          {this.props.children}
          {editMode ? (
            <FormComponent
              id={formID}
              formState={this.state.newForm}
              onSubmit={this.handleFormSave}
              extraInfo={extraInfo}
            />
          ) : (
            <OtherComponent />
          )}
        </div>
      </Drawer>
    );
  }
}

和formComponent：

const Form = (
  ({
    values,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    id
  }) => {
    return (
      <form id={id} onSubmit={handleSubmit} noValidate>
        <TextField
          name="name"
          label={"Name"}
          value={values.name}
          helperText={errors.name}
          error={Boolean(errors.name)}
          onChange={handleChange}
          onBlur={handleBlur}
          disabled={isSubmitting}
        />
      </form>
    );
  }
);

const NameForm = props => {
  return (
    <Formik
      initialValues={{
        name: ""
      }}
      validationSchema={Yup.object().shape({
        name: Yup.string().required("Fill the field")
      })}
      onSubmit={(values, { setSubmitting }) => {
        props.formState.set("name", values.name);
        setSubmitting(false);
        props.onSubmit();
      }}
      render={formikProps => <Form {...formikProps} id={props.id} />}
    />
  );
};

顺便说一句，谢谢您的关注哈哈

从HOC提交表单（Formik）时出现问题

0 个答案: