У меня проблема с отправкой формы из вышестоящего компонента.У меня есть что-то вроде этого кода ниже.Когда пользователь нажимает на EditIcon
, функция onSubmit запускается автоматически, а когда я удаляю тип из IconButton, он этого не делает, он запускается только один раз.Но большая проблема: в Chrome он срабатывает, но окно редактирования остается открытым, а в 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>
);
}
}
И компонент формы:
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} />}
/>
);
};
Кстати, заранее спасибо за внимание, ха-ха