Ich rendere einen Link mit reagieren:
render: ->
`<a className="upvotes" onClick={this.upvote}>upvote</a>`
Dann habe ich oben die Upvote-Funktion:
upvote: ->
// do stuff (ajax)
Vor dem Link hatte ich eine Zeitspanne an diesem Ort, aber ich muss zum Link wechseln und hier ist das Problem - jedes Mal, wenn ich auf .upvotes
die Seite klicke, wird aktualisiert, was ich bisher versucht habe:
event.preventDefault () - funktioniert nicht.
upvote: (e) ->
e.preventDefault()
// do stuff (ajax)
event.stopPropagation () - funktioniert nicht.
upvote: (e) ->
e.stopPropagation()
// do stuff (ajax)
return false - funktioniert nicht.
upvote: (e) ->
// do stuff (ajax)
return false
Ich habe auch alle oben genannten Versuche mit jQuery in meiner index.html versucht, aber nichts scheint zu funktionieren. Was soll ich hier machen und was mache ich falsch? Ich habe event.type überprüft und es ist also click
so, dass ich in der Lage sein sollte, eine Umleitung irgendwie zu vermeiden?
Entschuldigung, ich bin ein Neuling, wenn es um Reagieren geht.
Vielen Dank!
quelle
upvote
? Dies könnte ein Kontextproblem sein.preventDefault
Antworten:
Reaktionsereignisse sind eigentlich synthetische Ereignisse, keine nativen Ereignisse. Wie es geschrieben hier :
Versuchen Sie, Verwendung zu verwenden
Event.stopImmediatePropagation
:upvote: (e) -> e.stopPropagation(); e.nativeEvent.stopImmediatePropagation();
quelle
Eine Vollversion der Lösung wird die Upvotes der Methode in onClick verpacken, e übergeben und native e.preventDefault () verwenden.
upvotes = (e, arg1, arg2, arg3 ) => { e.preventDefault(); //do something... } render(){ return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }> upvote </a>); {
quelle
.bind(this)
für den Bin-Kontext in einer Reaktions-App. Zum Beispiel: medium.freecodecamp.org/…Versuchen Sie bind (this), damit Ihr Code wie folgt aussieht:
<a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>
oder wenn Sie in es6 reagieren Komponente im Konstruktor schreiben, können Sie dies tun
constructor(props){ super(props); this.upvote = this.upvote.bind(this); } upvote(e){ // function upvote e.preventDefault(); return false }
quelle
this
in ihrem Event-Handler ein ganz anderes Problem haben.rendern: ->
<a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>
quelle
.bind(this)
für den Bin-Kontext in einer Reaktions-App. Zum Beispiel: medium.freecodecamp.org/…In einem solchen Kontext
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); }
Wie Sie sehen, müssen Sie PreventDefault () explizit aufrufen. Ich denke, dass dieses Dokument hilfreich sein könnte.
quelle
Eine schöne und einfache Option, die für mich funktioniert hat, war:
<a href="javascript: false" onClick={this.handlerName}>Click Me</a>
quelle
action="javascript: false"
funktioniert auch.Dies liegt daran, dass diese Handler den Gültigkeitsbereich nicht beibehalten. Aus der Reaktionsdokumentation: Reaktionsdokumentation
Überprüfen Sie den Abschnitt "Keine automatische Bindung". Sie sollten den Handler wie folgt schreiben: onClick = () => {}
quelle
Der Kern, den ich gefunden habe und der für mich arbeitet:
const DummyLink = ({onClick, children, props}) => ( <a href="#" onClick={evt => { evt.preventDefault(); onClick && onClick(); }} {...props}> {children} </a> );
Gutschrift für srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53
quelle
onClick
als übergebenen Prop-Funktionsnamen zu verwenden, sondern so etwashandleClick
? Es ist verwirrend, andere weniger erfahrene Entwickler denken möglicherweise, dass es sich um das tatsächlich an die Komponente angehängte Ereignis handelt, während dies nicht der Fall ist. Außerdem erstellen Sie damit jedes Mal eine neue Funktion, wenn die Komponente erneut gerendert wird, auch wenn sie dieselben Requisiten erhält. Es wird als schlechte Praxis angesehen.Wenn Sie das Kontrollkästchen verwenden
<input type='checkbox' onChange={this.checkboxHandler} />
stopPropagation und stopImmediatePropagation funktionieren nicht.
Weil Sie onClick = {this.checkboxHandler} verwenden müssen
quelle
Wenn Sie React Router verwenden, empfehlen wir Ihnen, in die React-Router-Bootstrap-Bibliothek zu schauen, die eine praktische Komponente LinkContainer enthält. Diese Komponente verhindert das erneute Laden von Standardseiten, sodass Sie sich nicht mit dem Ereignis befassen müssen.
In Ihrem Fall könnte es ungefähr so aussehen:
import { LinkContainer } from 'react-router-bootstrap'; <LinkContainer to={givePathHere}> <span className="upvotes" onClick={this.upvote}>upvote</span> </LinkContainer>
quelle
Ich hatte
preventDefault
in der Vergangenheit einige Probleme mit Ankertags und vergesse immer, was ich falsch mache. Deshalb habe ich Folgendes herausgefunden.Das Problem, das ich oft habe, ist, dass ich versuche, auf die Attribute der Komponente zuzugreifen, indem ich sie direkt wie bei anderen React-Komponenten destrukturiere . Dies wird nicht funktionieren, die Seite wird neu geladen , auch mit
e.preventDefault()
:function (e, { href }) { e.preventDefault(); // Do something with href } ... <a href="/foobar" onClick={clickHndl}>Go to Foobar</a>
Es scheint, dass die Destrukturierung einen Fehler (
Cannot read property 'href' of undefined
) verursacht, der der Konsole nicht angezeigt wird, wahrscheinlich aufgrund des vollständigen Neuladens der Seite. Da die Funktion fehlerhaft ist, wird diepreventDefault
nicht aufgerufen. Wenn die href # ist, wird der Fehler korrekt angezeigt, da kein erneutes Laden erfolgt.Ich verstehe jetzt, dass ich nur auf Attribute als Second-Handler-Argument für benutzerdefinierte React-Komponenten zugreifen kann, nicht für native HTML-Tags . Um auf ein HTML-Tag-Attribut in einem Ereignis zuzugreifen, ist dies natürlich der folgende Weg:
function (e) { e.preventDefault(); const { href } = e.target; // Do something with href } ... <a href="/foobar" onClick={clickHndl}>Go to Foobar</a>
Ich hoffe, dies hilft anderen Leuten wie mir, verwirrt über nicht gezeigte Fehler zu sein!
quelle
Als ich zu dieser Seite kam, fand ich keine der genannten Optionen richtig oder funktionierte für mich. Sie gaben mir Ideen, um Dinge zu testen, und ich stellte fest, dass dies für mich funktionierte.
dontGoToLink(e) { e.preventDefault(); } render() { return (<a href="test.com" onClick={this.dontGoToLink} />}); }
quelle
Keine dieser Methoden hat bei mir funktioniert, daher habe ich dies nur mit CSS gelöst:
.upvotes:before { content:""; float: left; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
quelle