如何最优雅地处理超链接的点击

Question

我想要的呈现 HTML 看起来像这样 <a href="/page/my-cool-slug">My cool Slug</a>。

这意味着有人可以右键单击 link 并在新选项卡中打开。这将绕过 react-router 提供的花哨的 pushState 东西。

但是，如果有人定期点击，我需要更新 redux 以说明新的 slug 是什么（或分页页面或其他）并调用 browserHistory.push(...)。

必须有更简单方便的方法。几乎可以完成所有这些工作而不会造成任何混乱。这是我的应用程序的样子：

// imports
import { browserHistory } from 'react-router'
import changeSlug from './actions'

// the function
makeURL(thing) {
  return `/page/${thing.slug}`
}

// this click method
handleClick(event, thing) {
  event.preventDefault()
  this.props.dispatch(changeSlug(thing.slug))
  browserHistory.push(`/page/${thing.slug}`)
}

// the JSX
<a href={makeURL(myobject)}
  onClick={(event) => handleClick(event, myobject)}
>Go to {myobject.title}</a>

此外，我尝试在事件处理程序中使用 event.target 来获取 a.href 属性，但是因为 <a> 标记包含 <span> 元素，然后 event.target 是我在 <a> 元素内单击的 <span> 标记。

Answer 1

您可以使用 react_router 中的 <Link /> 并确定 onEnter/etc。 <Route />（<Router />）中的操作。
也可以换行您的 <a> in <span> 并向其添加一些属性并处理点击事件。
您还可以将 display: block 样式添加到 <a> => 它不应由 <span>

如何最优雅地处理超链接的点击

How to handle onclicks on hyperlinks most gracefully

reactjs

react-router

redux

react-router-redux