Sweetalert: 입력과 결합된 많은 버튼은 버튼의 값만 반환합니다.

확인 버튼과 다른 버튼이 모두 입력 값을 반환하기를 원하십니까? 사용 사례가 정확히 무엇인지 자세히 설명해 주시겠습니까? :)

@t4t5 아마도 이 FIXME 와 관련 .

swal({
    buttons: {
        cancel: "Go back!",
        one: {
          text: "Button One",
          value: 1
        },
        two: {
          text: "Button Two",
          value: 2
        },
        three: {
          text: "Button Three",
          value: 3
        }
      },
      content: {
        element: "input",
        attributes: {
          placeholder: "What's your favorite food?",
          type: "text",
        },
      }
/*
 * Only returns one value, because input is overridden by buttons
 * so you never get the input's value and the button's value
 * just the button's value.
 */
}).then( value => {
    switch (value) {                  
        case 1:
            swal("You pressed one!")
            break;
        case 2:
            swal("You pressed two!")
            break;
        case 3:
            swal("You pressed three!")
            break;
        default:
            swal("Phew, got outta there.");
    }
});

버튼 값을 사용할 수 있는 기능과 입력 값이 무엇이든 간에 중첩 경고 대신 논리를 수행하고 버튼에 의해 재정의되기 때문에 쓸모없는 입력이 있으면 매우 유용합니다.

button 값과 content 값을 모두 포함하려면 +1

버튼의 키 중 하나를 "확인"으로 설정하면 입력 값이 반환됩니다. 예:

swal({
  buttons: {
    cancel: "Go back!",
    one: {
      text: "Button One",
      value: 1
    },
    two: {
      text: "Button Two",
      value: 2
    },
    confirm: {
      text: "Button Three",
    }
  },
  content: {
    element: "input",
    attributes: {
      placeholder: "What's your favorite food?",
      type: "text",
    },
  }
})

사용 사례에 충분합니까, 아니면 모든 버튼이 입력 값과 버튼 값을 모두 반환해야 한다는 의미입니까?

@t4t5 모든 버튼은 입력 값과 버튼 값을 반환해야 합니다. 특히 내 사용 사례의 경우 웹 기반 서버 관리 도구에 SweetAlert를 사용하고 있으며 보다 구체적으로는 사용자가 "금지" 버튼을 클릭할 때 관리자에게 프롬프트를 표시합니다. 그런 다음 경고에는 시간 길이를 나타내기 위해 ("1d", "1w" 또는 "forever") 값을 반환해야 하는 세 개의 버튼이 있습니다. 또한 사용자가 금지된 이유에 대한 이유를 제공하기 위해 입력 텍스트 필드가 필요합니다. 이 버튼 중 하나를 클릭하면 내 콜백이 클릭한 버튼의 값과 입력 값을 쌍으로 만들어 내 서버에 API 쿼리를 생성하여 차단 이유와 차단 기간을 설정할 수 있습니다.

이 사용 사례가 두 값을 모두 반환하는 것의 중요성을 명확히 하기를 바랍니다. 이를 통해 개발자는 1단계 프로세스여야 하는 작업을 수행하기 위해 사물을 해킹하거나 두 개의 경고를 생성할 필요가 없습니다.

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

위의 스니펫은 콘텐츠와 버튼 값을 가져오는 "해키" 방식입니다. 그러나 이 스레드의 앞부분에서 표현한 것처럼 두 값을 모두 반환하도록 하는 것이 훨씬 좋습니다.

또 다른 예는 입력 필드와 두 개의 버튼인 확인 + 취소가 있는 모달( closeOnEsc: false, closeOnClickOutside: false )입니다. 지금은 @JayHerlth 솔루션을 사용