У меня возникли проблемы с получением пунктов меню, связанных с обработчиком событий. Здесь макет пользовательского интерфейса, показывающего состояние, изменяется со временем. Это выпадающее меню (через Bootstrap), с элементом корневого меню, показывающим текущий выбор:
[ANN]<click ... [ANN] ... [BOB]<click ... [BOB]
[Ann] [Ann]
[Bob]<click + ajax [Bob]
[Cal] [Cal]
Конечная цель - асинхронно изменять содержимое страницы на основе выбора пользователя. Нажатие на Bob должно запускать handleClick
, но это не так.
В качестве побочного примечания я не очень доволен тем, как componentDidMount вызывает this.handleClick();
, но теперь он работает как способ получить исходный контент меню с сервера.
/** @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')
);
});
Я почти уверен, что мое туманное понимание области javascript виновато, но все, что я пробовал до сих пор, не удалось (включая попытку передать обработчик через реквизиты).