Question

我想通过单击IonAlert内的按钮来建立链接。 IonAlert是我用来显示警报的组件，我可以通过单击“取消”或“确认”与它进行交互（请参见下图）

我有以下代码：

<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>

如果用户单击按钮确认，我只想拥有一个链接。但是我不知道该怎么做。

谢谢您的阅读！

Answer 1

好的，我不是React方面的专家，但是由于没有人回答4天，我将介入并看看我们能否解决您的问题。

一种选择是使用InAppBrowser Ionic Native plugin。然后，您可以编写一些这样的代码：

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

另一个选择是使用React的任何路由器API。在Angular中，这类似于将路由器注入构造函数中，然后使用导航功能之一。

那不会直接解决您的问题，但这至少应该为您提供理论上自己解决问题的方法。

Answer 2

好吧，我终于解决了这个问题，但非常简单...首先，我在react组件的状态中创建了一个适当的子项。

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();
                        }
                    }
                ]}
            />;
        }

所有工作。

如何通过单击IonAlert（离子组件）内部的按钮进行链接

2 个答案: