Réagir onClick et preventDefault() lien d'actualisation/redirect?

une version complète de la solution enveloppera la méthode upvotes à l'intérieur d'onClick, passer e et utiliser l'E. natif.preventDefault ();

upvotes = (e, arg1, arg2, arg3 ) => {
    e.preventDefault();
    //do something...
}

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

essayez de lier(ce) de sorte que votre code ressemble à ci-dessous --

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

si vous écrivez dans l'es6 réagir composant dans le constructeur, vous pourriez faire ceci

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

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

}

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

Le Résumé que j'ai trouvé et qui fonctionne pour moi:

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

Crédit pour srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

C'est parce que ces gestionnaires ne préservent pas la portée. De la documentation react:réagir documentation

Vérifiez la section "pas d'autobinding". Vous devriez écrire le gestionnaire comme: onClick = () = > {}

Si vous utilisez la case à cocher

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

stopPropagation et stopImmediatePropagation ne fonctionne pas.

parce que vous devez utiliser onClick={présent.checkboxHandler}

si vous utilisez React Router, je vous suggérerais de regarder dans la bibliothèque react-router-bootstrap qui a un composant très pratique LinkContainer. Ce composant empêche le rechargement par défaut de la page pour que vous n'ayez pas à gérer l'événement.

Dans votre cas, il pourrait ressembler à quelque chose comme:

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to={givePathHere}>
    <span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>

j'ai eu quelques problèmes avec l'ancre et balises preventDefault dans le passé, et j'oublie toujours ce que je fais mal, alors, voici ce que j'ai compris.

Le problème que j'ai souvent, c'est que j'essaie d'accéder aux attributs de composant en déstructurant directement comme avec les autres composants de réaction. Cela ne fonctionne pas, la page se rechargera même e.preventDefault():

function (e, { href }) {
  e.preventDefault();
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

Il semble que la déstructuration provoque une erreur (Cannot read property 'href' of undefined) qui n'est pas affiché sur la console, probablement en raison du rechargement complet de la page. Comme la fonction est en erreur, le preventDefault ne se fait pas appeler. Si href est #, l'erreur s'affiche correctement puisqu'il n'y a pas de recharge réelle.

je comprends maintenant que Je ne peux accéder aux attributs qu'en tant qu'argument de second handler sur les composants custom React, pas sur les balises HTML natives. Donc bien sûr, pour accéder à un attribut de balise HTML dans un événement, ce serait la façon:

function (e) {
  e.preventDefault();
  const { href } = e.target;
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

j'espère cela aide d'autres personnes comme moi perplexes par des erreurs non montrées!

je n'ai pas trouvé d'options mentionnées à corriger ou travailler pour moi, quand je suis venu à cette page. Ils m'ont donné des idées pour tester les choses et j'ai découvert que ça marchait pour moi.

dontGoToLink(e) {
  e.preventDefault();
 }

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}

Dans un contexte comme celui-ci

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Comme vous pouvez le voir, vous devez appeler preventDefault() explicitement. Je pense que docs, pourrait être utile.