javascript - tipos - Reaccionar: pasar la función al componente hijo

que es el dom en javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• "Esto" no está definido dentro de la función del mapa Respuesta 1 respuesta

Intento pasar una función a mi componente hijo. Para cada componente secundario cuando el usuario haga clic en ellos, se llamará la función onclick. Esta función onclick está escrita en el componente principal.

Componente principal:

class AgentsList extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log(this.props);
}
render() {
const { agents } = this.props;
...
var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
});
return (
<div id="agents">
<div className="agents-title">
<h3>Title</h3>
</div>
{agentsNodes}
</div>
);
}
}

Componente hijo:

class Agent extends React.Component {
constructor(props) {
super(props);
}
render() {
const { agent, t } = this.props;
return (
<Link to=''/'' onClick={this.props.onClick}>
...
</Link>
);
}
}

En esta línea: <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

Dice que handleClick no está definido ... ¿Cómo puedo resolver este problema?

Gracias por tu respuesta.

Answer 1

Debes vincular los Agentes a la Lista de Agentes: Aquí hay un ejemplo rápido con tu código, tuve que deshacerme de algunas cosas, pero tienes la idea:

http://jsfiddle.net/vhuumox0/19/

var agentsNodes = agents.map(function(agent, i) {
if(agent.id_intervention == "") {
return (
<Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
);
}
}, this); // here