React-Router Link, come attivare un evento click su un collegamento da un altro componente

Question

Sto provando a impostare una serie di React-Router per avere la navigazione all'interno di un determinato componente. Ce l'ho impostato in modo i tag sui collegamenti funzionano correttamente, ma sto cercando di stile loro di simile a questa:

Lo stile è impostato in questo modo:

<div className="btn-group" data-toggle="buttons"> 
     <label className="btn btn-primary-outline active"> 
     <input type="radio" name="options" id="option1" autocomplete="off" checked />Payments 
     </label> 
     <label className="btn btn-primary-outline"> 
     <input type="radio" name="options" id="option2" autocomplete="off" /> Bills 
     </label> 
     <label className="btn btn-primary-outline"> 
     <input type="radio" name="options" id="option3" autocomplete="off" /> Charge 
     </label> 
    </div> 

E il attuale serie di collegamenti si presenta così (senza styling):

<ul> 
    <Link to='/options/option1'>option1</Link> 
    <Link to='/options/option2'>option2</Link> 
    <Link to='/options/option3'>option3</Link> 
</ul> 

il codice HTML (in alto) è scritto in HTML, non JSX, ma non è questo il problema. Sto cercando di combinare i componenti di collegamento nel codice HTML sopra in modo che le opzioni attivino la funzionalità dei tag di collegamento.

Nella documentazione Reagire ho trovato questo:

per la comunicazione tra due componenti che non hanno una relazione padre-figlio, è possibile impostare il proprio sistema di evento globale. Iscriviti agli eventi in componentDidMount(), annulla l'iscrizione a componentWillUnmount() e chiama setState() quando ricevi un evento. Il pattern di flusso è uno dei possibili modi per sistemarlo.

Quindi questo mi ha dato l'idea di inserire i tag di collegamento all'interno delle rispettive etichette, dando loro uno stile di {{display: 'none'}}, e avendo i clic sui pulsanti di opzione attivare un clic su il rispettivo tag Link. Ciò garantirebbe la stessa funzionalità che ci aspetteremmo dal tag Link (passando alla cronologia del browser, ecc.).

Tuttavia, il seguente non funziona:

<label className="btn btn-primary-outline active" onClick={() => document.getElementById('linkToOption1').click() }> 
    <Link to='/options/option1' id="linkToOption1" style={{display: 'none'}}>Option1</Link> 
     <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />Option1 
    </label> 

Nell'esempio precedente potete vedere ho creato un gestore di eventi onClick che seleziona l'id del tag link e fa scattare un clic.

Answer 1

Sono stato in grado di risolvere il mio problema, quindi sto pubblicando ciò che ha funzionato per me. Si prega di rispondere o commentare se ci sono cambiamenti o una soluzione migliore.

Non è stato possibile attivare un evento click su un collegamento, ma sono riuscito a simulare gli aspetti di cui avevo bisogno.

Per far funzionare tutto questo avevo bisogno il seguente:

1. su una spinta di eventi click per browserHistory per aggiornare il percorso
2. link 'attiva' classe CSS alla corrente visualizzazione/URL (ho realizzato questo attraverso state componente)
3. aggiornamento dello stato quando l'uRL viene modificato (stato modificato al evento finestra popstate, e anche aggiornare lo stato CurrentView sul componente monterà)

T i suoi risultati nella capacità di evidenziare la scheda corretta quando si fa clic su una scheda, quando l'url viene modificato manualmente su una determinata rotta e quando si utilizzano i pulsanti di navigazione indietro/avanti.

Questo è tutto il codice nel mio file di navigazione che crea un componente di navigazione piuttosto interessante e funziona con react-router e browserHistory.

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

class Navmenu extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { currentView: '' } 
    this.getClasses.bind(this) 
    } 

    // in case of url being manually set, figure out correct tab to highlight 
    // add event listener to update the state whenever the back/forward buttons are used. 
    componentWillMount() { 
    this.changeLocation() 
    window.addEventListener('popstate', this.changeLocation.bind(this)) 
    } 

    componentWillUnmount() { 
    window.removeEventListener('popstate', this.changeLocation.bind(this)) 
    } 

    // update state based on the URL 
    changeLocation() { 
    const path = window.location.pathname.split('/') 
    const currentView = path[path.length - 1] 
    this.setState({ currentView }) 
    } 

    // update state and update react-router route 
    navigateToRoute(route) { 
    this.setState({ currentView: route }) 
    browserHistory.push(`/options/${route}`) 
    } 

    // give correct tab the 'active' bootstrap class 
    getClasses(link) { 
    let classes = 'btn btn-primary-outline flex-button' 
    if (this.state.currentView === link) { 
     classes += ' active' 
    } 
    return classes 
    } 

    render() { 
    return (
     <div className="btn-group flex-navbar" data-toggle="buttons"> 
     <label className={this.getClasses('option1')} onClick={() => this.navigateToRoute('option1')}> 
      <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />option1 
     </label> 
     <label className={this.getClasses('option2')} onClick={() => this.navigateToRoute('option2')}> 
      <input type="radio" name="options" id="option2" autoComplete="off" /> option2 
     </label> 
     <label className={this.getClasses('option3')} onClick={() => this.navigateToRoute('option3')}> 
      <input type="radio" name="options" id="option2" autoComplete="off" /> option3 
     </label> 
     </div> 
    ) 
    } 
} 

export default Navmenu