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:React-Router Link, come attivare un evento click su un collegamento da un altro componente
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.
Non si può semplicemente utilizzare l'API React-Router e inserire la nuova posizione all'interno dell'evento onChange dell'input? – Mark