onclick - manejo - props react español

Cómo configurar el controlador de eventos en el subcomponente React

Question

Tengo problemas para conectar los elementos del menú a un controlador de eventos. Aquí hay un simulacro de la interfaz de usuario que muestra los cambios de estado en el tiempo. Es un menú desplegable (a través de Bootstrap), con el elemento del menú raíz que muestra la selección actual:

[ANN]<click ... [ANN] ... [BOB]<click ... [BOB]
[Ann] [Ann]
[Bob]<click + ajax [Bob]
[Cal] [Cal]

El objetivo final es cambiar el contenido de la página de forma asíncrona según la selección del usuario. handleClick clic en Bob debería activar el handleClick , pero no lo es.

Como nota al margen, no estoy terriblemente feliz con la forma en que componentDidMount llama this.handleClick(); , pero funciona por ahora como una forma de obtener el contenido del menú inicial del servidor.

/** @jsx React.DOM */
var CurrentSelection = React.createClass({
componentDidMount: function() {
this.handleClick();
},
handleClick: function(event) {
alert(''clicked'');
// Ajax details ommitted since we never get here via onClick
},
getInitialState: function() {
return {title: "Loading items...", items: []};
},
render: function() {
var itemNodes = this.state.items.map(function (item) {
return <li key={item}><a href=''#'' onClick={this.handleClick}>{item}</a></li>;
});
return <ul className=''nav''>
<li className=''dropdown''>
<a href=''#'' className=''dropdown-toggle'' data-toggle=''dropdown''>{this.state.title}</a>
<ul className=''dropdown-menu''>{itemNodes}</ul>
</li>
</ul>;
}
});
$(document).ready(function() {
React.renderComponent(
CurrentSelection(),
document.getElementById(''item-selection'')
);
});

Estoy casi seguro de que mi confusa comprensión del alcance de javascript es la culpable, pero todo lo que he intentado hasta ahora ha fallado (incluido tratar de pasar el controlador a través de accesorios).

Answer 1

El problema es que está creando los nodos de elementos utilizando una función anónima, y ​​dentro de eso significa la window . La solución es agregar .bind(this) a la función anónima.

var itemNodes = this.state.items.map(function (item) {
return <li key={item}><a href=''#'' onClick={this.handleClick}>{item}</a></li>;
}.bind(this));

O crea una copia de this y usa eso en su lugar:

var _this = this, itemNodes = this.state.items.map(function (item) {
return <li key={item}><a href=''#'' onClick={_this.handleClick}>{item}</a></li>;
})