Форма редактирования с отправкой для создания, редактирования и удаления записей (несколько отправок)

#javascript #reactjs #redux #redux-form

Вопрос:

Я экспериментирую с реакцией. Я в основном бэкенд, поэтому интерфейс доставляет мне некоторые очевидные проблемы. Я попробовал некоторые решения Google, но не добился никакого успеха. Вот в чем проблема. У меня есть следующая форма. введите описание изображения здесь

Эта форма позволяет вам создавать или редактировать Сервис. Существует тот же метод обратного вызова для сохранения изменений.

 export const createOrUpdateService = (data, _, props) =gt; {  console.log('Create or Update invoked.');  if (data.id) {  props.dispatch(actions.updateService(data.id, data));  }  else {  props.dispatch(actions.createService(data));  } }  

По какой-то причине, когда я редактирую и сохраняю, операция работает успешно. Но когда я создаю и сохраняю этот метод, он никогда не вызывается. Это мои кнопки восстановления, вызывающие метод createOrUpdateService.

 lt;button className='btn btn-form my-button--orange' type='button'  style={{margin: "5px"}}  disabled={editable} onClick={() =gt; enableEdit() }gt;  New Service  lt;/buttongt;  lt;button className='btn btn-form my-button--orange' type='button'  style={{margin: "5px"}}  disabled={!valid || submitting} onClick={() =gt; enableEdit() } gt;  Edit Service  lt;/buttongt;  lt;button className='btn btn-form my-button--orange' type='submit'  style={{margin: "5px"}}  disabled={!editable} onClick={() =gt; handleEdit(handleSubmit(createOrUpdateService)) } gt;  Save  lt;/buttongt;  

Это метод handleEdit —

 const handleEdit = (editCallBack) =gt; {  if (editable) {  editCallBack()  }  toggleEditable();  }  

Мне интересно, может ли editCallback() включать createOrUpdateService() для «Службы редактирования», тогда почему бы не для «Новой службы»? Мне интересно, как я могу вызвать несколько отправок из одной и той же формы.

Ответ №1:

Проблема заключалась в том, что отправка не была успешной, если значение props.invalid верно. В моем случае для create props.invalid было верно, а для edit-ложно. Поэтому я оглядел свои проверки и понял, что у меня есть проверка для поля «идентификатор». Который будет равен нулю для создания.

Я удалил проверку, и она работала нормально.