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

Question

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

这意味着某人可以右键单击该链接并在新选项卡中打开。这将绕过 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 是我在内部单击的<span> 标记<a> 元素。

Answer 1

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