Блог

Я пытаюсь создать предупреждение Swal, которое должно содержать поле ввода с кнопкой продолжить и отменить в ReactJS. Это мой код прямо сейчас:

               swal({
                    icon: "warning",
                    text: 'Are you sure you want to continue? This operation is not reversible',
                    content: {
                        element: "input",
                        attributes: {
                          placeholder: title   " reason",
                        },
                      },
                }).then(comment => {
                    if (comment === null || comment === ''){
                        swal({icon: 'error', text: 'You need to type the cancellation reason'});
                        return false
                    }
                })
 

Этот код создает только кнопку «ОК», и я получаю ввод от пользователя в переменной комментария, но мне нужно добавить кнопку «Продолжить» и кнопку «Отмена», чтобы оставить предупреждение. Я попытался добавить параметр button в параметры swal, и это создает кнопки, но я не могу получить ввод от пользователя.

Я также пытался добавить необработанный html в содержимое и получить ввод с помощью метода дескриптора, но до сих пор мне это не удавалось.

Может быть, решение для этого простое, но я не могу его получить. Большое спасибо за помощь

Я нашел способ решить эту проблему на случай, если кому-то придется сделать что-то подобное. Я просто создал ввод, выполнив document.createElement («ввод»), а затем получил значение в зависимости от того, нажал ли пользователь Продолжить или Отменить:

               const cancellation_reason = document.createElement('input');
              swal({
                    icon: "warning",
                    text: 'Are you sure you want to continue? This operation is not reversible',
                    content: {
                        element: cancellation_input,
                        attributes: {
                          placeholder: title   " reason",
                        },
                      },
                    buttons: {
                        continue: 'continue',
                        cancel: 'cancel'
                    }
                    
                }).then(option => {
                    switch (option){
                        case 'continue':
                            if (cancellation_input.value === null || cancellation_input.value === ''){
                                swal({icon: 'error', text: 'You need to type the cancellation reason'});
                                return false
                            }
                            prop(runID, null, path, cancellation_input.value).then(showMesagge);
                            break;
                        case 'cancel':
                            break;
                    }
                })