Link 组件内的 NextJS 按钮

Question

我想知道 NextJS Link 组件中怎么可能有按钮？当您包裹按钮并单击按钮时，它会运行 onClick 事件，然后重定向到 href 属性中的值。

如何只运行 onClick 按钮事件并停止重定向？

<Link href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}>
  <div className="responsive-table__row">
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
    <div className="responsive-table__item">
      <button className="responsive-table__button button button--secondary" onClick={() => handleModalOpenerClick(field)}>Show modal</button>
    </div>
  </div>
</Link>

Answer 1

将您的 onClick 处理程序更改为：

onClick={(e) => {
   e.preventDefault();
   e.stopPropagation();
   handleModalOpenerClick(field);
}}

它应该有效。