javascript - instalar - react js examples

Enlace de evento OnClick en React.js

Question

Me gustaría pasar el identificador de div principal, al hacer clic en ese div o en cualquier elemento secundario del mismo div . Pero no puedo lograrlo. Por favor, dime dónde estoy cometiendo un error. El código está abajo:

viewMore: function(i,j){
        console.log(''You clicked: '', i  );
    },

render : function(){
  var attributeId = "groups_";
  attributeId+= index;
  return(
  //parent div
    <div className="groups" id={attributeId} onClick={this.viewMore}>
        <div className="floatLeft"> Group Name: <h3>My Name</h3></div>
            <span className="floatRight typeCd">POC</span>
        <div className="clearfix"> Key Attributes: 
            <ul>
                <li> POC 1</li>
            </ul>
        </div>
    </div>
    )
};

Answer 1

Aquí hay una actualización y una descripción general de las respuestas anteriores:

1. Usando onClick = {this.viewMore.bind (this, attributeId)} por @HenrikAndersson Si bien este enfoque sirve para el propósito, utiliza la sintaxis de enlace con la que muchos no se sienten cómodos.

2. Usando el campo de clase pública mencionado por @ZenMaster . Esta solución tiene más o menos el mismo rendimiento, también viene con una mejor sintaxis. Pero se vuelve complicado cuando tenemos que pasar un parámetro.

   class TestComponent extends React.Component {
     onClick = (event) => {
       const {id} = event.target;
       console.log(id);
     }
   
     render() {
       return (
         <div>
           <h3 id={this.props.id} onClick={this.onClick}>
             {this.props.name}
           </h3>
         </div>
       );
     }
   }

El enfoque mencionado anteriormente omite los parámetros de paso y en su lugar usa atributos personalizados para acceder a los datos requeridos en el controlador de clics.

Una mejor solución sería:

class MyComponent extends React.Component {

    handleClick = (item) => (e) => {
        e.preventDefault()    
        console.log(`This has access to item ${item}! and event(e)`)
    }

    render(){
        const item={ id:''1'', value: ''a'' }
        return(
            <button onClick={ this.handleClick(item) }  >Click</button>
        )
    }

}

Referencia: manejar eventos por funciones de flecha en la aplicación React

Answer 2

Como veo este tipo de sugerencias en varios lugares, también voy a mover mi comentario a una respuesta, para proporcionar una vista adicional:

class TestComponent extends React.Component {
  constructor() {
    super();
    this.onClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const {id} = event.target;
    console.log(id);
  }

  render() {
    return (
      <div>
        <h3 id={this.props.id} onClick={this.onClick}>
          {this.props.name}
        </h3>
      </div>
    );
  }
}

Esto permite:

1. evitar enlaces innecesarios
2. acceder a la id y a cualquier otra propiedad de una manera mucho más reactiva.

Por supuesto, el ejemplo anterior supone que recibe la id como accesorio, pero también puede hacer las manipulaciones necesarias.

ACTUALIZACIÓN 1 - 28 de noviembre de 2016

Enlace agregado a CodePen de los comentarios anteriores.

ACTUALIZACIÓN 2 - 30 de marzo de 2017

Como se mencionó, esto no funcionaría si usa React.createClass para definir sus componentes. No tienes un constructor para lograr esto. Puede usar otros métodos de ciclo de vida, si no le importa un poco de fealdad.

Habiendo dicho eso, es 2017. Usa ES6, ¿quieres?

ACTUALIZACIÓN 3 - 12 de mayo de 2017

Si está utilizando la transformación de propiedades de clase , puede simplificarla aún más:

class TestComponent extends React.Component {
  onClick = (event) => {
    const {id} = event.target;
    console.log(id);
  }

  render() {
    return (
      <div>
        <h3 id={this.props.id} onClick={this.onClick}>
          {this.props.name}
        </h3>
      </div>
    );
  }
}

ACTUALIZACIÓN 4 - 4 de febrero de 2018

Debido a las mejoras de bind y amigos en V8 (Chakra y probablemente también), puede que sea mejor usar this.click.bind(this) o envolverlo en una función de flecha al pasar a onClick .

¿Por qué?

El método anterior, creado solo por razones de rendimiento, cerró algunas posibilidades para inyectar dinámicamente funciones en el prototipo del componente.

NOTA 1 - 14 de abril de 2018

Tenga en cuenta que el método mencionado en la Actualización 4 aún presenta algunos problemas de rendimiento, ya que en cada pasada de render se crea una nueva función como resultado de la bind . Esto, a su vez, se filtrará hacia el componente secundario y causará representaciones innecesarias, ya que la función cambia cada vez.

Lo mismo sucede cuando pasa una función de flecha en línea.

Todos los demás métodos, como el uso de propiedades de clase, afectarán su herencia (lo que debería evitar, pero aún así), simplemente debido al hecho de que, actualmente, Babel los traslada a funciones "a instancia", que no están en el cadena prototipo.

Así que esto:

class Person {
  printA = () => { console.log(''a'') }
}

se convierte en:

function _classCallCheck(instance, Constructor) {...abridged...}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.printA = function () {
    console.log(''a'');
  };
};

Answer 3

He hecho una respuesta actualizada para ES6 aquí: https://.com/a/35748912/76840

Esencialmente, puede usar expresiones de función de flecha, que tienen el beneficio de preservar this :

onClick={(event)=>this.viewMore(attributeId, event)}

A partir de esta edición, si está usando Babel con la etapa 2 habilitada, puede usar una propiedad como esta:

// Within your class...
viewMore = (event) => { /* ... */ }
// Within render method in your JSX
onClick = {this.viewMore}

Answer 4

Puedes usar la función de currying .

ES5:

viewMore(param) { // param is the argument you passed to the function
    return function(e) { // e is the event object that returned

    };
}

ES6

viewMore = param => e => {
  // param is the argument you passed to the function
  // e is the event object that returned
};

Y solo úsalo así:

onClick={this.viewMore("some param")}

Answer 5

viewMore = (i,j) => () => {
    console.log(i,j)
}

Para pasar parámetros a los controladores de eventos, necesitamos usar curry . Con el método anterior no se crean nuevas funciones todo el tiempo mientras se llama render.