Como por Reactjs.org para manejar el evento y evitar defecto, utilice a continuación el código:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Sin embargo, esto también requiere agregar enlace en el constructor como:

this.handleClick = this.handleClick.bind(this);

Yo era capaz de conseguir un comportamiento deseado por el siguiente código:

<span>
  <a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>

Pregunta: Que uno es mejor opción? Parece que la primera requiere el uso de control de estado del componente y la segunda opción puede hacer las cosas independientemente de componente a con estado o sin estado.

  • La segunda tiene un fallo similar a hacer onClick={this.handleClick.bind(this)} en la primera, donde una nueva función que se crea en cada render.
InformationsquelleAutor TechTurtle | 2017-03-22

4 Comentarios

  1. 14

    Ambas opciones producir casi el mismo resultado. Desde ActionLink es un componente independiente, handleClick va a ser re-creado y onClick reasignados. Si usted desea conseguir el mejor rendimiento, puede utilizar una clase, algo como esto:

    class ActionLink extends React.Component () {
      handleClick = (e) => {
        e.preventDefault();
        console.log('The link was clicked.');
      };
    
      render() {
        return (
          <a href="#" onClick={handleClick}>
            Click me
          </a>
        );
      }
    }

    En este ejemplo. el handleClick está limitado sólo una vez y sólo el método render será ejecutado. Usted también puede unirse a la handleClick en el constructor, si lo prefiere. Pero las diferencias son tan pequeñas que yo le sugerimos que utilice en el que usted prefiere y encuentra más claro.

  2. 3

    la mejor manera de arreglar este repetido la función de llamada en la página de carga es hacer

    <a href="#" onClick={() => {this.handleClick}}>click me</a>
    • Parece que la izquierda fuera de la () llamar handleClick.
  3. 1

    Hay un ligero problema de rendimiento con el —el segundo— ambos fragmentos. Cada vez que usted hace <a> etiqueta de la función en el onClick serán reasignados.

    Aquí es un post detallado el contorno de todas las formas de enlazar this en reaccionar. (https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w)


    Editado. Me malinterprete, el código de ejemplo, se tiene el mismo problema de la asignación de la función en cada render como la línea de la flecha de la función fragmento de código. Consulte Vincent D’amour‘s aceptado respuesta.

  4. 0

    Creo que se debe enlazar con objeto actual. deje que se trate. consulte el ejemplo seguido:

    <a href="#" onClick={this.handleclick.bind(this)}>click me</a>

Dejar respuesta

Please enter your comment!
Please enter your name here