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 />; } }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/