React.js onClick 返回事件

Question

I had properly working link with JS onclick attribute on a CMS, the code looked like this:

<a class="button is-success" onclick="return klaro.show();">click</a>

it was opening the model window. Now I'm trying to replicate this on an old React.js project. I remember, that there are a few language notations, but as I'm not working at all with this language it's difficult for me.

I've these kind of links:

    <li><a href="#link">{t('Link')}</a></li>
    <li><a class="button is-success" onclick="return klaro.show();">{t('cookie choice')}</a></li>

But since it's React the last link is not working. I tried to change it to <a className="button is-success" onClick={() => "return klaro.show();"}>člick</a> but the onClick event is absent once the page is rendered.

How should it be done correctly with this notation?

Answer 1

Pass a reference to of klaro.show to the onClick prop. This will tell React to call the klaro.show method when you click.

<a className="button is-success" onClick={klaro.show}>člick</a>

Answer 2

People already answered the question correctly; but there is another dirty unclean way to do that as well; I don't recommend it , just for your information:

<li dangerouslySetInnerHTML={{__html: `
   <a class="button is-success" onclick="return klaro.show();">click</a>`
}}></li>

Answer 3

Use this

<li><a href="#link">{t('Link')}</a></li>
<li><a class="button is-success" onClick={klaro.show}>{t('cookie choice')}</a></li>

Or Use Like This

<li><a href="#link">{t('Link')}</a></li>
<li><a class="button is-success" onClick={() => klaro.show()}>{t('cookie choice')}</a></li>