ハイクリンクでonclicksを最もうまく扱う方法

Question

私が欲しいのは、このような外観のHTMLです。<a href="/page/my-cool-slug">My cool Slug</a>。

つまり、誰かがリンクを右クリックして新しいタブで開くことができます。それは反応ルータが提供する素晴らしいpushStateをバイパスします。

しかし、誰かが定期的にクリックすると、reduxを更新して、新しいスラッグ（またはページングページなど）と、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> 

また、私はa.href属性を取得するイベントハンドラでevent.targetを使用してみましたが、<a>タグが<span>要素が含まれているため、その後、event.targetは私が<a>内でクリックした<span>タグです素子。

Answer 1

1. react_routerの<Link />を使用して、onEnter/etcを判別できます。 <Route />の アクション（<Router />）。
2. <a>を<span>にラップし、いくつかの属性を追加して clickイベントを処理することもできます。
3. また、あなたが<a>にdisplay: blockスタイルを追加することができます=>それ いけないラップ<span>