React:onClick on Anchor元素似乎不起作用

时间:2017-02-23 13:09:41

标签: reactjs

我现在学习React一段时间了,我遇到了一个奇怪的问题,我遇到了麻烦。这非常简单:onClick on my Anchor元素似乎无法正常工作。

这是我的代码:



function Tabs(props) {
	return (
		<li className="nav-item">
	    <a id="user-list-tab" className="nav-link tab-link" href="#" onClick={props.onTabClick}>{props.tabName}</a>
	  </li>
	);
}

Tabs.propTypes = {
	onTabClick: React.PropTypes.func.isRequired,
	tabName: React.PropTypes.string.isRequired,
}



var TabsNav = React.createClass ({
	getInitialState: function() {
		return {
			tabs: [
			{name: "Users list", isActive: false},
			{name: "Create new user", isActive: false},
			],
		}
	},
	showTabContent: function() {
		console.log("it works");
	},
	render: function() {
		return (
	  	<ul className="nav nav-tabs justify-content-center">
	  		{this.state.tabs.map(function(element, index) {
	  			return <Tabs tabName={element.name} className={element.isActive ? "nav-item active" : "nav-item"} onTabClick={this.showTabContent} />
	  		}.bind(this))}
	  	</ul>
		);
	}
})
&#13;
&#13;
&#13;

当我点击链接时似乎没有发生任何事情......

我将不胜感激任何帮助。它让我疯狂了很长一段时间了:))

0 个答案:

没有答案