SweetAlert 2 Ввод маски

Я использую компонент Sweet Alert2 (https://sweetalert2.github.io/) -react, и я нужно на втором шаге замаскировать ввод (разделитель тысяч и префикс = "$") это возможно?

Вот код


    import React, { Component } from 'react';
    import Swal from 'sweetalert2';
    import { Fab } from '@material-ui/core';
    import withReactContent from 'sweetalert2-react-content';


    const reSwal = withReactContent(Swal);

    class NewTask extends Component {


      state = {
        goToProfile: false
      };


      handleNewTask = async () => {

        reSwal.mixin({
          input: 'text',
          confirmButtonText: 'Next →',
          showCancelButton: true,
          progressSteps: ['1', '2']
        }).queue([
          {
            title: 'Age',
            text: 'Your Age'
          },
          {
            title: 'Budget',
            text: 'Your Budget',
            input: 'number',
            inputAttributes: {
              min: 100,
              max: 1000000
            },
          },

        ]).then((result) => {
          if (result.value) {
            reSwal.fire({
              title: 'thank u !',
              confirmButtonText: 'Lovely!'
            })
          }
        })
      }

      render() {

        return (
          
            New
          
        );
      }
    }

    export default NewTask;

Я не знаю, как это контролировать. Спасибо за помощь


reactjs masking sweetalert2
person Alejandro Arias    schedule 02.08.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я знаю, что прошло уже 3 месяца, но надеюсь, что все же смогу вам помочь.

У меня возникла эта проблема только сейчас, и я искал ответы в Google, но не нашел решения, поэтому я использовал этот метод для достижения того, что хотел:

swal.fire({
    text: 'myText',
    input: 'text',
    inputAttributes: {
        id: 'myInput'
    },
    onOpen: function(el) {
        var container = $(el);
        container.find('#myInput').mask('$ 0000.00');
    }

В этом решении используется подключаемый модуль маски Jquery (вы можете увидеть документацию здесь ) и атрибут onOpen из SweetAlert2. В onOpen вы можете передать функцию, которая получает контейнер swal, находит ввод по идентификатору с помощью JQuery и вызывает метод .mask() с запрошенной вами маской.

На официальном сайте Jquery's Mask Plugin вы можете увидеть больше примеров масок.

Добрый день!

person Dahan Schuster    schedule 02.11.2019
comment
Подскажите, пожалуйста, результаты! - person Dahan Schuster; 29.11.2019