为什么onClick不为html a呈现?

React的事件被称为 Synthetic Events .

事件处理程序将被传递给 SyntheticEvent A. 围绕浏览器本机事件的跨浏览器包装。它有 与浏览器本机事件相同的界面,包括 stopPropagation() 和 preventDefault() ,但活动有效 在所有浏览器中都是相同的。

换句话说,react并不完全映射到普通HTML和JavaScript,因为大部分dom操作都是在react dom中处理的( VDOM )而不是通过浏览器的常规DOM。

你可以使用 button 你也可以使用 <a> 喜欢

<a
  className={"a_2"}
   onClick={(e) => {
      e.preventDefault();
      alert("Your alert message");
      }
   }
></a>

根据 document :

事件处理程序将被传递给SyntheticEvent的实例 围绕浏览器本机事件的跨浏览器包装。它有 与浏览器的本机事件相同的界面,包括 StopRoPagation()和preventDefault(),事件除外 在所有浏览器中都是相同的。

锚点的默认行为是刷新页面,必须防止以下默认行为:

e.preventDefault()

也可以移除 href 或使用 href='javascript:void(0)'

所以锚定标签可以使用这种方式:

<a
  className={"a_2"}
   onClick={(e) => {
      e.preventDefault();
      alert("message");
      }
   }
></a>

或

const callMe = ()=>{
alert("message")
}
  <a href='javascript:void(0)' onClick={callMe}>
              some text
            </a>

要查看事件,可以使用开发人员工具中“元素”选项卡下的“事件侦听器”选项卡