reactjs - prevent - stoppropagation react

¿Reaccionar onClick y evitar la actualización/redirección del enlace DefaultDefault()?

Question

Estoy renderizando un enlace con react:

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

Entonces, arriba tengo la función de voto positivo:

upvote: ->
  // do stuff (ajax)

Antes del enlace tuve un espacio en ese lugar, pero necesito cambiar al enlace y aquí está el problema: cada vez que hago clic en .upvotes la página se actualiza, lo que he intentado hasta ahora:

event.preventDefault (): no funciona.

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

event.stopPropagation (): no funciona.

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

devuelve falso, no funciona.

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

También probé todo lo anterior usando jQuery en mi index.html, pero nada parece funcionar. ¿Qué debo hacer aquí y qué estoy haciendo mal? ¿He comprobado event.type y es click así que supongo que debería poder evitar la redirección de alguna manera?

Disculpe, soy un novato cuando se trata de reaccionar.

¡Gracias!

Answer 1

El Gist que encontré y funciona para mí:

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

Crédito por srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Answer 2

En un contexto como este

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

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

Como puede ver, debe llamar a preventDefault () explícitamente. Creo que this documento, podría ser útil.

Answer 3

Esto se debe a que esos controladores no conservan el alcance. De reaccionar documentación: reaccionar documentación

Verifique la sección "sin enlace automático". Debe escribir el controlador como: onClick = () => {}

Answer 4

He tenido algunos problemas con las etiquetas de anclaje y preventDefault en el pasado y siempre olvido lo que estoy haciendo mal, así que esto es lo que descubrí.

El problema que a menudo tengo es que trato de acceder a los atributos del componente al desestructurarlos directamente como con otros componentes React. Esto no funcionará, la página se volverá a cargar , incluso con e.preventDefault() :

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

Parece que la desestructuración causa un error ( Cannot read property ''href'' of undefined ) que no se muestra en la consola, probablemente debido a la recarga completa de la página. Como la función tiene un error, preventDefault no se llama. Si href es #, el error se muestra correctamente ya que no hay recarga real.

Ahora entiendo que solo puedo acceder a los atributos como un segundo argumento de controlador en componentes React personalizados, no en etiquetas HTML nativas . Entonces, por supuesto, para acceder a un atributo de etiqueta HTML en un evento, esta sería la forma:

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

¡Espero que esto ayude a otras personas como yo desconcertados por los errores no mostrados!

Answer 5

Los eventos de reacción son en realidad eventos sintéticos, no eventos nativos. Como está escrito here :

Delegación de eventos: React en realidad no adjunta controladores de eventos a los propios nodos. Cuando React se inicia, comienza a escuchar todos los eventos en el nivel superior utilizando un único oyente de eventos. Cuando un componente se monta o desmonta, los controladores de eventos simplemente se agregan o eliminan de una asignación interna. Cuando ocurre un evento, React sabe cómo enviarlo usando esta asignación. Cuando no quedan controladores de eventos en la asignación, los controladores de eventos de React son simples no-ops.

Intente usar Use Event.stopImmediatePropagation :

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

Answer 6

No encontré ninguna de las opciones mencionadas para ser correcta o funcionar para mí cuando llegué a esta página. Me dieron ideas para probar cosas y descubrí que esto funcionó para mí.

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

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

Answer 7

Si está utilizando React Router, le sugiero que busque en la biblioteca react-router-bootstrap que tiene un componente útil LinkContainer. Este componente evita la recarga de página predeterminada para que no tenga que lidiar con el evento.

En su caso, podría verse algo así como:

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

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

Answer 8

Si usa la casilla de verificación

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

stopPropagation y stopImmediatePropagation no funcionarán.

Porque debes usar onClick = {this.checkboxHandler}

Answer 9

Una opción agradable y simple que funcionó para mí fue:

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>

Answer 10

Una versión completa de la solución incluirá los votos a favor del método dentro de onClick, pasando e y usando e.preventDefault () nativo.

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

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

Answer 11

intente vincular (esto) para que su código se vea a continuación:

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

o si está escribiendo en es6 reaccionar componente en constructor podría hacer esto

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

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

}

Answer 12

ninguno de estos métodos me funcionó, así que lo resolví con CSS:

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}

Answer 13

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