您的位置：首页 > Web前端 > React

react tab

2015-12-04 17:16 549 查看

<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<link rel="stylesheet" tpe="text/css" href="style.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var data = [
{name: 'Red', value: 'red'},
{name: 'Blue', value: 'blue'},
{name: 'Yellow', value: 'yellow'},
{name: 'Green', value: 'green'},
{name: 'White', value: 'White'}
];

var TabSelector = React.createClass({
getInitialState: function() {
return {selected: this.props.selected};
},

handleOnClick: function (evt) {
this.setState({'selected': evt.target.getAttribute('data-value')})
},

render: function() {
var tabs = this.props.data.map(function (item) {
var selected = item.value == this.state.selected ? 'selected' : '';
return <li data-value={item.value}
className={selected}
onClick={this.handleOnClick}
>{item.name}</li>
;
}, this);

return <div className="tab-selector">
<label>{this.props.label}</label>
<ul>
{tabs}
</ul>
</div>
;
}
});

React.render(
TabSelector({label: 'Color', data: data, selected: null}),
document.getElementById('container')
);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航