Как сделать ссылку, нажав на кнопку внутри IonAlert (компонент ионный) - PullRequest
Новая
       20

Как сделать ссылку, нажав на кнопку внутри IonAlert (компонент ионный)

0 голосов
/ 10 июля 2019

Я хочу сделать ссылку, нажав на кнопку внутри IonAlert. IonAlert - это компонент, который я использовал для отображения предупреждения, и я могу взаимодействовать с ним, щелкнув по кнопке «Отмена» или «Подтвердить» (см. Следующий рисунок)

enter image description here

У меня есть следующий код: 

<Link to="/packed" className="item">

                <IonAlert
                    isOpen="true"
                    onDidDismiss={() => ""}
                    header={'Fin des check'}
                    message={'Tous les produits ont été checkés. Voulez-vous valider ces checks ?'}
                    buttons= {[
                        {
                          text: 'Cancel',
                          role: 'cancel',
                          cssClass: 'secondary',
                          handler: () => {
                            console.log('user cancel');
                          }
                        }, 
                        {
                          text: 'Confirm',
                          handler: () => {
                            CallApi();
                            console.log("user confirm");
                          }
                        }
                      ]}
                />
                  div
          </Link>

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

enter image description here

Спасибо за чтение!

Ответы [ 2 ]

0 голосов
/ 15 июля 2019

Хорошо, я, наконец, решил эту проблему, но очень просто ... Во-первых, я создал правильное состояние состояния компонента реакции. 

state = {
        redirectToDeliveries: false, //will allow or no the redirection to component Deliveries
    }

После этого, когда я нажимаю на свою кнопку, явызовите мою функцию, которая находится в моем обработчике. 

if(this.state.numberOfCheck === this.state.numberOfProductsPerCommand) {
            button = <IonAlert
                isOpen="true"
                onDidDismiss={() => ""}
                header={'Fin des check'}
                message={'Tous les produits ont été checkés. Voulez-vous valider ces checks ?'}
                buttons= {[
                    {
                        text: 'Cancel',
                        role: 'cancel',
                        cssClass: 'secondary',
                    }, 
                    {
                        text: 'Confirm',
                        handler: () => {
                            this.setOrderStatus();
                        }
                    }
                ]}
            />;
        }

В этой функции я просто изменяю состояние свойства redirectToDeliveries. 

setOrderStatus() {

        this.setState({redirectToDeliveries: true});

    }

И непосредственно перед проверкой моего состояния, если,Я создал другое условие, если просто проверить значение этого свойства. 

if(this.state.redirectToDeliveries) {
            return <Redirect to='/' />
        }

        if(this.state.numberOfCheck === this.state.numberOfProductsPerCommand) {
            button = <IonAlert
                isOpen="true"
                onDidDismiss={() => ""}
                header={'Fin des check'}
                message={'Tous les produits ont été checkés. Voulez-vous valider ces checks ?'}
                buttons= {[
                    {
                        text: 'Cancel',
                        role: 'cancel',
                        cssClass: 'secondary',
                    }, 
                    {
                        text: 'Confirm',
                        handler: () => {
                            this.setOrderStatus();
                        }
                    }
                ]}
            />;
        }

Все работы.

0 голосов
/ 14 июля 2019

ОК. Я не эксперт в React, но, поскольку никто не ответил в течение 4 дней, я зайду и посмотрю, сможем ли мы отстегнуть вас.

Один из вариантов - использовать InAppBrowser.Ionic Native плагин .Затем вы можете написать такой код: 

this.iab.create(link, '_system', 'location=yes');

Другой вариант - использовать любой API-интерфейс маршрутизатора для React.В Angular это было бы что-то вроде внедрения маршрутизатора в конструктор, а затем использования одной из функций навигации.

Это не решит вашу проблему напрямую, но это должно, по крайней мере, дать вам теорию для решения этой проблемы самостоятельно.

...