Question

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

这意味着有人可以右键单击该链接并在新标签页中打开。这将绕过反应路由器提供的花哨的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

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

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

1 个答案: