メテオを作る方法インラインsvg要素に反応するページ全体をリフレッシュせずにリンクをクリック

Question

私はいくつかのガイダンスが必要です。初めてここに来たので、私が使っている「用語」のいくつかは珍しいかもしれません。

私はJSXで（Meteor plafformを使用して）どのようなタイトルで述べたように達成しようとしています。現在、svgでxlinkHrefを使用すると、要素をクリックするとリンクが開きますが、ページ全体が更新されます。 svg（hrefを使用）の外側では、ページ全体を更新せずにリンクを開きます。コード例：私はSVGタグ外の「」タグをラップする場合、それは間違いなく動作しますが、私はちょうどクリック可能なように赤い丸が必要であることを

import React, { Component } from 'react'; 

export default class App extends Component { 

render() { 
    return (
    <div> 
     <svg> 
      <a xlinkHref="/nextpage"> //clicking this will refresh whole page 
      <circle cx="50" cy="50" r="40" fill="red" /> 
      </a> 
      <circle cx="150" cy="50" r="40" fill="yellow" /> 
     </svg> 
     <a href="/nextpage">Click to Next Page</a> //clicking this will not refresh 
    </div> 
    ) 
} 

注意。

サークルエレメントを別々のsvgに分割してから "a"タグでラップすることを考えていましたが、私はそれを行うことができないと言っています。どのようにしてsvgエレメントをクリックして、 ？

編集：あなたがサークル上のonclickイベントハンドラを追加することができますいくつかのコードのタイプミス

Answer 1

を修正しました。で

export default class App extends Component { 

    onCircleClick(event) { 

    event.preventDefault(); 
    console.log('Inside on circle click'); 
    window.location='/nextpage'; 
    } 

render() { 
return (
<div> 
    <h1> Testing svg tag </h1> 
    <svg> 
    <circle onClick= {this.onCircleClick} cx="50" cy="50" r="40" fill="red"/> 
    <circle onClick= {this.onCircleClick} cx="150" cy="50" r="40" fill="yellow" /> 
    </svg> 
</div> 
); 
} 
} 

Answer 2

を使用すると、ページ全体を更新せずに、リンクを開くことができますルータに反応からbrowserHistoryを使用することにより

ルータを反応します。

import React, { Component } from 'react'; 
import { browserHistory } from 'react-router'; 


export default class App extends Component { 

    handleClick(link) { 
    browserHistory.push(link); 
    } 

    render() { 
    return (
     <div> 
     <svg> 
      <a onClick={this.handleClick.bind(null, "/nextpage")}> 
      <circle cx="50" cy="50" r="40" fill="red" /> 
      </a> 
     </svg> 
     </div> 
    ) 
    } 

} 

browserHistoryは、利用可能なHTML5履歴APIを使用し、それ以外の場合はフル・リフレッシュにフォールバックします。 browserHistoryは、URLを提供するためにサーバー側で追加の設定が必要ですが、最近のWebページでは一般的に望ましい解決策です。さらに詳しい

は、ルータのAPIに反応： https://github.com/ReactTraining/react-router/blob/master/docs/API.md#browserhistory

history.pushState（）で

---

あなたがルータに反応使用できない場合、あなたはまだ変更するHTML5のAPIのpushstateを使用することができますルート：https://developer.mozilla.org/en-US/docs/Web/API/History_API

history.pushState(name, title, "nextpage"); 

history.pushState（）を使用することができるはず流星

のためのルータにhttp://caniuse.com/#search=history

---

：古いブラウザでatible。そうでない場合、ルーターは、ルーターと同じ方法でpushStateに相当する必要があります。