react tab
2024-10-13 04:13:12
<!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>
最新文章
- Hibernate中使用Criteria查询
- SQL Server 连接字符串备忘
- Js设置及获取Cookie的方法
- Focus相关点滴
- [转]重叠IO
- Flex编译探索:FLEXSDK自带编译器与MAVEN插件Flex-mojos
- C# 内存管理优化畅想----前言
- 使用EntityFramework持久化聚合
- oracle 同义词
- apt
- ubuntu设置网络
- vue中复选框全选与反选
- 【bzoj1264】[AHOI2006]基因匹配Match 树状数组
- ElasticSearch核心知识总结(一)es的六种搜索方式和数据分析
- CentOS6.8下安装xz命令
- 每天刷Web面试题(前10天汇总)
- Codeforces.100633J.Ceizenpok&#39;s formula(扩展Lucas)
- BigDecimal的一些用法
- [转][C#]拆分参数对
- 确保线程安全下使用Queue的Enqueue和Dequeue