Access react's function with parameters from external JavaScript

238 Views Asked by At

Is it possible to add onclick event inside the messages' parameter of UIKIT.notification?
Something like this:

notif__undoDelete = (param) => {
    setTimeout(function(param) {
        UIkit.notification(
            `<div class="uk-flex uk-flex-middle uk-margin-medium-right">
                <span>Exercise Deleted.</span><a onclick="{here}" class="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
            </div>`,
            { timeout: 6000, pos: "bottom-left" }
        )
    }, 800, param)
}
1

There are 1 best solutions below

0
On BEST ANSWER

I use this answer to solve my problem
Call react component's function from external JavaScript function

I added in componentDidMount method first:

componentDidMount () {
    var me = this
    window.undoDelete = () => {
        var external_me = this
        let param = JSON.parse(external_me.event.target.getAttribute("data-param"))
        me.undoDelete(param)
    }
}

I have an undoDelete() method somewhere and when I call my UIkit.notification it's gonna be something like this and my react's undoDelete() method will be called. I added data-param as well to pass parameters.

UIkit.notification(
`<div className="uk-flex uk-flex-middle uk-margin-medium-right">
     <span>Item Deleted.</span>
     <a onclick="window.undoDeleteExternal()" data-param='`+ JSON.stringify(param) +`' className="uk-button uk-button-primary uk-button-small uk-margin-auto-left">Undo</a>
</div>`,
{ timeout: 6000, pos: 'bottom-left' }

)