Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

365
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!