1

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

这意味着有人可以右键单击该链接并在新选项卡中打开。这将绕过 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>

4

1 回答 1

0
  1. 您可以使用<Link />react_router 并确定 onEnter/etc。您的<Route />(in <Router />) 中的操作。
  2. 您也可以将其包装起来<a>并向<span>其添加一些属性并处理单击事件。
  3. 您也可以将display: block样式添加到<a>=> 它不应该由<span>
于 2016-04-28T14:34:42.577 回答