React中<a>嵌套<button>点击后页面重载，如何实现无重载双功能？

架构老林

2026-8-20

问题原因及解决方案

问题所在

标签的默认行为：点击包裹在<a>内的按钮时，会触发<a>的默认锚点跳转逻辑，在React单页应用中，这可能被路由机制拦截，导致页面意外重载。

事件写法不符合React规范：原生的onclick属性在React中应使用驼峰式的onClick。

解决方案

以下两种方法均可实现「执行自定义逻辑+锚点定位」且不重载页面：

方法一：保留标签，阻止默认行为并手动实现滚动

import React from 'react';

class YourComponent extends React.Component {
  navigate = () => {
    alert("navigate");
  };

  handleAnchorClick = (e) => {
    // 阻止<a>的默认跳转行为
    e.preventDefault();
    // 手动定位到目标元素
    document.getElementById('gotothisid').scrollIntoView({
      behavior: 'smooth', // 可选，开启平滑滚动
      block: 'start'
    });
  };

  render() {
    return (
      <>
        <a href="#gotothisid" onClick={this.handleAnchorClick}>
          <button onClick={this.navigate}>点击跳转</button>
        </a>
        <div id="gotothisid" style={{ marginTop: '1000px' }}>目标区域</div>
      </>
    );
  }
}

export default YourComponent;

方法二：移除 标签，在按钮点击事件中统一处理

这种写法更简洁，避免嵌套元素的事件冲突：

import React from 'react';

class YourComponent extends React.Component {
  navigateAndScroll = () => {
    alert("navigate");
    // 执行锚点定位
    document.getElementById('gotothisid').scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  };

  render() {
    return (
      <>
        <button onClick={this.navigateAndScroll}>点击跳转</button>
        <div id="gotothisid" style={{ marginTop: '1000px' }}>目标区域</div>
      </>
    );
  }
}

export default YourComponent;