Reaction onClick und preventDefault() Link Refresh/Redirect?

Question

Ich bin Rendering eine Verbindung mit reagieren:

render: -> 
    `<a className="upvotes" onClick={this.upvote}>upvote</a>` 

Dann oben Ich habe die upvote Funktion:

upvote: -> 
    // do stuff (ajax) 

Bevor Link I Spanne an diesem Ort hatte, aber ich brauche, um Verbindung zu wechseln und hier ist das Problem - jedes Mal, wenn ich auf .upvotes klicken Sie auf die Seite aktualisiert wird, was ich versucht habe, so weit:

Event.preventDefault() - nicht funktioniert.

upvote: (e) -> 
    e.preventDefault() 
    // do stuff (ajax) 

event.stopPropagation() - nicht funktioniert.

upvote: (e) -> 
    e.stopPropagation() 
    // do stuff (ajax) 

return false - funktioniert nicht.

upvote: (e) -> 
    // do stuff (ajax) 
    return false 

Ich habe auch versucht, alle oben genannten jQuery in meine index.html verwenden, aber nichts scheint zu funktionieren. Was soll ich hier machen und was mache ich falsch? Ich habe event.type überprüft und es ist click, also sollte ich in der Lage sein, Redirect irgendwie zu vermeiden?

Entschuldigung, ich bin ein Neuling, wenn es um React geht.

Vielen Dank!

Answer 1

Reaktionsereignisse sind eigentlich synthetische Ereignisse, keine systemeigenen Ereignisse. Wie es geschrieben wird here:

Ereignisdelegierung: React verknüpft Ereignishandler nicht tatsächlich mit den Knoten selbst. Wenn React gestartet wird, beginnt es mit einem einzelnen Ereignis-Listener auf alle Ereignisse auf der obersten Ebene zu reagieren. Wenn eine Komponente bereitgestellt oder ausgehängt wird, werden die Ereignishandler einfach einer internen Zuordnung hinzugefügt oder daraus entfernt. Wenn ein Ereignis auftritt, weiß React, wie es mit diesem Mapping versendet wird. Wenn im Mapping keine Event-Handler mehr vorhanden sind, sind die Event-Handler von React einfache No-Ops.

Try to use Verwenden Sie Event.stopImmediatePropagation:

upvote: (e) -> 
    e.stopPropagation(); 
    e.nativeEvent.stopImmediatePropagation(); 

Answer 2

Dies liegt daran, diese Handler Umfang nicht bewahren. Aus der reaktiven Dokumentation: react documentation

Überprüfen Sie den Abschnitt "keine automatische Bindung".Sie sollten den Handler wie schreiben: onClick =() => {}

Answer 3

try bind (dies), damit Ihr Code sieht unten wie -

<a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a> 

oder wenn Sie in es6 schreiben reagieren Komponente in Konstruktor Sie könnten diese

constructor(props){ 
    super(props); 
    this.upvote = this.upvote.bind(this); 
} 

upvote(e){ // function upvote 
    e.preventDefault(); 
    return false 

} 

Answer 4

The Gist ich gefunden und arbeitet für mich:

const DummyLink = ({onClick, children, props}) => (
    <a href="#" onClick={evt => { 
     evt.preventDefault(); 
     onClick && onClick(); 
    }} {...props}> 
     {children} 
    </a> 
); 

Kredit für srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Answer 5

machen: -> <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

Answer 6

Eine Vollversion der Lösung wird die Methode upvotes innerhalb onClick sein Einwickeln, vorbei e und verwenden nativen e.preventDefault();

upvotes(e){ 
    //do something... 
    e.preventDefault(); 
} 

render(){ 
    return (<a type="simpleQuery" onClick={(e) => {this.upvotes(e)}}> 
     upvote 
    </a>); 
{ 

Answer 7

Wenn Sie Checkbox

<input 
    type='checkbox' 
    onChange={this.checkboxHandler} 
/> 

stopPropagation und stopImmediatePropagation wird nicht funktionieren.

Weil Sie onClick = {} this.checkboxHandler