Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

374
Vistas
evento reactjs Onclick, enviando valor al padre

Soy bastante nuevo en ReactJS, JavaScript y todo el asunto de la codificación.

Hice una lista de matrices que se transmiten al elemento secundario desde el componente principal, ahora quiero crear un evento onClick cada vez que el usuario haga clic en cualquiera de los elementos de la lista.

El valor (utilizado como ID de clave) se envía de vuelta al padre, por lo que el padre puede enviar ese valor de clave a otro hijo que utilizará la representación condicional basada en esa clave a la que representar el componente. Preferiblemente no quiero usar ninguna otra biblioteca como flux.

Estoy atascado porque no puedo pasar ese valor del niño al padre. Creo que hay cierta confusión sobre la sintaxis o tal vez mi lógica no es correcta. Solo pude vincularlo a una función dentro de la clase secundaria para verificar si el clic se está registrando.

 class Parent extends React.Component { render() { var rows = []; this.props.listlinkarray.forEach(function(linklist) { rows.push(<Child linklist={linklist} key={linklist.key} />); }); return ( <div> <h3> ListHead </h3> {rows} </div> ); }} class Child extends React.Component { // was checking how the Onclick event works // getComponent(data,event) { console.log('li item clicked!'); console.log(data); event.currentTarget.style.backgroundColor = '#ccc'; } render() { return ( <div> <ul><li onClick={this.getComponent.bind(this,this.props.linklist.key)}> </div> ); } }

Array tiene estos datos

 var ListNameAndLinks= [ { name:'ABC', key:1} , { name:'BCD', key:2} ];

Quiero pasar el valor que el padre obtiene del hijo en función del clic a esta clase para que pueda procesarse en función del valor que obtiene.

 class Check extends React.Component { render() { var i = 1 // i want that value from parent to this component in if condition if (i=1) { return <UIone />; } return <UItwo />; } }
over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Pase un método onClick desde el componente parent , así:

 this.props.listlinkarray.forEach((linklist)=>{ rows.push(<Child linklist={linklist} key={linklist.key} onClick={this.onClick.bind(this)}/>); });

Defina esta función en Padre:

 onClick(key){ console.log(key); }

En Child Component, llame a este método y devuelva la identificación a parent , así:

 getComponent(key) { this.props.onClick(key); }

Funcionará.

Verifique el jsfiddle para ver el ejemplo de trabajo: https://jsfiddle.net/ahdqq5yy/

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda