React.js中如何正确实现带返回值的onClick点击事件？

我之前在CMS中有一个功能正常的链接，使用JS的onclick属性，代码如下：

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

该链接可打开模态窗口。现在我尝试在旧React.js项目中复现该功能，但遇到问题。当前项目中的链接代码如下：

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

但最后一个链接在React中无法正常工作。我尝试将其修改为：

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

但页面渲染后onClick事件消失，请问该如何正确编写这段代码？

React的事件处理逻辑和原生HTML的字符串式事件不同，你之前的错误在于把事件处理写成了返回字符串，而非执行实际函数。正确写法如下：

基础实现（仅触发模态窗） #

直接在onClick的箭头函数里调用klaro.show()即可，同时保留React要求的className替代class：

<a className="button is-success" onClick={() => klaro.show()}>{t('cookie choice')}</a>

保留默认行为拦截（和原CMS逻辑一致） #

原代码中return klaro.show()的作用通常是拦截a标签的默认跳转行为，在React里可以通过两种方式实现：

1. 返回false阻止默认行为：

<a className="button is-success" onClick={() => {
  klaro.show();
  return false;
}}>{t('cookie choice')}</a>

2. 使用事件对象的preventDefault()方法（更符合React推荐的写法）：

<a className="button is-success" onClick={(e) => {
  e.preventDefault();
  klaro.show();
}}>{t('cookie choice')}</a>

关键注意点 #

• React中事件处理函数必须是可执行的函数逻辑，不能是字符串（这就是你之前修改后事件“消失”的原因）；
• 确保全局变量klaro在组件作用域内可访问（比如已挂载到window对象上）；
• 类名必须用className，不能用原生HTML的class。

内容的提问来源于stack exchange，提问作者Kuzma