как сбросить форму и включить кнопку отправки после отправки формы (react-formio)?

Я использую пакет response-formio для динамического создания формы.

Я создал простую форму входа по этой ссылке: https://codesandbox.io/s/cra-react-formio-iy8lz

После сборки он создает JSON. Затем я создаю форму, используя этот JSON, но когда я отправляю форму после fulfill all validation of form, она всегда отображается в disable mode, почему?

Как снова включить кнопку ?? когда мой promise is resolved и как сбросить форму после отправки?

вот мой код, ссылка на коды и ящик

onSubmit={i => {
  alert(JSON.stringify(i.data));
  var promise1 = new Promise(function(resolve, reject) {
     setTimeout(function() {
        resolve("foo");
      }, 300);
   });
 }

введите здесь описание изображения еще кое-что

Я также добавил one more button

{
   label: "Click",
   action: "event",
   showValidations: false,
   block: true,
   key: "click",
   type: "button",
   input: true,
   event: "clickEvent"
},

Я также добавил обработчик кликов, но он не работает

clickEvent={() => {
  alert("--ss");
}}

person Community    schedule 03.11.2019    source источник
comment
Попробуйте это   -  person Nithin Thampi    schedule 04.11.2019
comment
Однако есть сбой, когда вы можете увидеть сообщение об ошибке (под кнопкой отправки) при второй отправке, но форма фактически отправляется.   -  person Nithin Thampi    schedule 04.11.2019
comment
Также не то, что такие настройки плохо документированы. Поэтому я бы посоветовал, если библиотека не подходит для ваших требований, вам не следует строить ее поверх нее. Создайте заявку в репозитории Formio на GitHub и посмотрите, что ответит команда.   -  person Nithin Thampi    schedule 04.11.2019
comment
Я думаю, что глюк можно удалить с помощью css ..как перекрыть css   -  person    schedule 04.11.2019
comment
Это может быть. Но в будущем вы можете столкнуться с проблемами, которые будет сложно отладить. Также у них есть стартовый комплект реакции, который показывает, какие настройки могут быть выполнены. Вы можете скачать его и поиграть на своем локальном компьютере.   -  person Nithin Thampi    schedule 04.11.2019
comment
@NithinThampi, я думаю, что sign up их веб-сайта нужно создать там проект   -  person    schedule 04.11.2019
comment
Нет. Просто клонируйте это репо и запустите на локальном компьютере github.com/formio/react-app-starterkit   -  person Nithin Thampi    schedule 04.11.2019
comment
Спасибо за помощь ...!! последнее, что означают эти две строки. Если вы еще этого не сделали, создайте проект на portal.form.io . Вы можете импортировать файл src / project.json, чтобы добавить все формы и ресурсы, необходимые для этого проекта. Измените файл src / config.js так, чтобы переменная PROJECT_URL указывала на проект, который вы создали в form.io.   -  person    schedule 04.11.2019
comment
что я так понимаю play with src/project.json ?? может поменять PROJECT_URL .PROJECT_URL будет path of project.json file правильно?   -  person    schedule 04.11.2019
comment
Я говорю по телефону. Так что не могу это подтвердить. Но .. Приложение использует конфигурацию формы по умолчанию. Вы можете перейти на вкладку сети, чтобы увидеть форму json. Вы можете создать свою собственную форму со своей учетной записью и заменить URL-адреса по умолчанию, чтобы вернуть пользовательскую форму json.   -  person Nithin Thampi    schedule 04.11.2019
comment
Добро пожаловать, брат. Я отвечу на комментарий Tom Evening, если у вас возникнут трудности.   -  person Nithin Thampi    schedule 04.11.2019
comment
как было предложено, я загружаю проект, делаю npm install и запускаю проект .. !! ничего не видно .._ 2_) filebin.net/uve3ccvdx19unq4h/ / a> Я не создавал учетную запись на их сайте.   -  person    schedule 05.11.2019
comment
Я не регистрировался на их веб-сайте. Переместите project.json в общую папку (_2 _). Измените var PROJECT_URL = '/project.json'; var API_URL = 'https://api.form.io'; в файле конфигурации. Но ничего не видно   -  person    schedule 05.11.2019
comment
не могли бы вы помочь, как начать этот проект ???   -  person    schedule 05.11.2019
comment
Было бы здорово, если бы вы сказали мне, какой шаг вы делаете после npm i и npm start   -  person    schedule 05.11.2019
comment
Запустите приложение - ›Нажмите« Зарегистрироваться »вместо входа в систему (это должна быть фиктивная функция регистрации) -› Вы должны увидеть ссылку events рядом с кнопкой «Домой» - ›Нажмите здесь, чтобы увидеть форму -› Перейдите в базу кода и посмотрите, как форма создана (используйте маршруты, чтобы увидеть визуализируемый компонент формы)   -  person Nithin Thampi    schedule 05.11.2019
comment
Спасибо..!! полезный   -  person    schedule 05.11.2019
comment
@NithinThampi из-за того, что знает лучшую библиотеку для создания динамических форм   -  person user944513    schedule 17.12.2019


Ответы (1)


Вы можете попробовать использовать свойство отправки компонента <Form />.

Согласно документам ..

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

Таким образом, в этом случае вы можете управлять компонентом в родительском компоненте.

Здесь submissionData - состояние родительского компонента, и компонент инициализируется состоянием из родительского (изначально пустые значения).

<Form submission={{ data: submissionData }} />

Теперь внутри обработчика onSubmit вы можете попытаться сбросить состояние и принудительно выполнить повторный рендеринг.

    onSubmit={() => {
         // Reset submission data
          setSubmissionData({});
        };
      }

Полный код будет выглядеть, как показано ниже.

export default () => {
  const [submissionData, setSubmissionData] = useState({});
  return (
    <Form
      //all form props
      submission={{ data: submissionData }}
      onSubmit={() => {
        var promise1 = new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve("foo");
          }, 300);
        });

        promise1.then(function(value) {
          alert(value);
         // Reset submission data
          setSubmissionData({});
        });
      }}
    />
  }

Прикрепленные коды и ссылка на ящик в виде комментария.

person Nithin Thampi    schedule 04.11.2019
comment
я думаю с помощью css мы можем убрать глюки - person ; 04.11.2019
comment
Ты можешь это сделать. Но убедитесь, что вы не слишком переборщили с настройками платы. Вы не получите особой помощи, если сделаете это, потому что ни у кого не было бы опыта в выполнении этих многочисленных настроек. И вам может не хватить помощи - person Nithin Thampi; 04.11.2019
comment
@NithinThampi из-за того, что знает лучшую библиотеку для создания динамических форм - person user944513; 17.12.2019
comment
@NithinThampi Не могли бы вы сообщить мне, какая переменная данных содержит данные json в этом примере. SubmissionData будет отвечать за сбор данных json или любых других переменных? поскольку я хочу сохранить эти данные Json в моей собственной базе данных. - person nick; 01.02.2021