Question

我是一名React新手，使用链接标签遇到了分页控件的问题。我的基本分页控件呈现如下：

byte

呈现它的JSX定义如下：

<a href="#page2">Next</a>

问题是当您点击Next链接转到第2页时，浏览器最终会在URL栏中显示＃page3 ，即使代码正确呈现第2页。代码不会修改URL。）跟踪调试器中的JavaScript后，我看到<a href={"#page"+(this.props.pageIndex+1)} onClick={this.handleClick}> {this.props.name} </a>停留在＃page1，然后跳转到＃page3。

我相信正在发生的事情是React正在拦截click事件，并正确地重新呈现页面，然后浏览器的默认链接处理在下一个链接更改为指向＃page3后触发而不是＃page2。

我的分析是否正确？如果是这样，那么使这个工作正常的方法是什么，浏览器在URL栏中显示＃page2？

编辑：以下是上下文中的简化代码：

window.location.href

Answer 1

阻止锚点上的默认事件：

handleClick(event) {
    event.preventDefault()
    this.props.handleClick(this.props.pageIndex)
}

Answer 2

我无法通过自己的事件处理和url重写使其工作可靠，因此我决定使用React Router V4重建它。当事情变得艰难时，不要重新发明轮子并让其他人为你努力工作总是一个好主意。

React onClick不会阻止浏览器设置锚标记

2 个答案: