如何通过单击 IonAlert（组件离子）内的按钮来制作 link

Question

我想通过单击 IonAlert 中的按钮来创建 link。 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>

如果用户单击确认按钮，我只想得到一个 link。但是我不知道怎么做。

感谢您的阅读！

Answer 1

好的，我不是 React 方面的专家，但由于 4 天没有人回复，我会加入，看看我们是否可以让你摆脱困境。

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

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

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

这不会直接解决你的问题，但这至少应该给你自己解决这个问题的理论。

Answer 2

好的，我终于解决了这个问题，但是非常简单...首先，我在反应组件的状态中创建了一个属性。

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 之前，我创建了另一个条件 if，它只是检查此属性的值。

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（组件离子）内的按钮来制作 link

How make a link by a click on a button inside an IonAlert (component ionic)

render

hyperlink

reactjs

ionic4