react表格实现以及jquery实时模糊查询

HTML：

其中，需要用到 react.js，react-dom.js，browser.js以及jquery库。

react实现（searchBox.js）：

var Pro = React.createClass({
		getInitialState:function(){
			return {
				data:[
					{
						name:'电锅',
						price:100,
						sale:1000
					},
					{
						name:'炖锅',
						price:100,
						sale:1000
					},
					{
						name:'电碗',
						price:100,
						sale:1000
					},
					{
						name:'铁板烧',
						price:100,
						sale:1000
					},
					{
						name:'开水机',
						price:100,
						sale:1000
					},
					{
						name:'电咖啡壶',
						price:100,
						sale:1000
					},
					{
						name:'电茶壶',
						price:100,
						sale:1000
					},
					{
						name:'电炉',
						price:100,
						sale:1000
					},
					{
						name:'烤箱',
						price:100,
						sale:1000
					},
					{
						name:'面包机',
						price:100,
						sale:1000
					},
					{
						name:'果汁机',
						price:100,
						sale:1000
					},
					{
						name:'搅拌器',
						price:100,
						sale:1000
					},
					{
						name:'烘碗机',
						price:100,
						sale:1000
					}
				]
			}
		},
		handleChange:function(){
			var text = "";
			//实时筛选，不用点击按钮
			setInterval(function(){
				text = $('.search').val();//获取文本框输入
				if($.trim(text) != ""){
					$("table tbody tr").hide().filter(":contains('"+text+"')").show();
				}else{
					$('table tr').show();//当删除文本框的内容时，又重新显示表格所有内容
				}
			},100);
		},
		render:function(){
			return(
				

					
					
					

						

						

							
名称
							
价格
							
销量
						
						
						
				
			)
		}
	});
	var ProList = React.createClass({
		render:function(){
			return(
				
				{
					this.props.data.map(function(pro, index){
						return 
					})
				}
				
			)
		}
	});
	
	var ProItem = React.createClass({
		render:function(){
			var pro = this.props.data;			
			return (
				
					{pro.name}
					{pro.price}
					{pro.sale}
				
			)
		}
	});
	
	ReactDOM.render(,document.getElementById("pro"));

注意在引用searchBox.js时，type="text/babel“。这是因为react是JSX语法。

最后便是CSS样式：searchBox.css

.container {
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

table {
	border-collapse: collapse;
}

tr {
	width: 100%;
	height: 40px;
	text-align: center;
}

tr th {
	text-align: left;
	padding-left: 1em;
}

tr th,
tr td {
	border: 1px solid #D3D3D3;
	width: 200px;
}

tr th {
	border-bottom: 2px solid #D3D3D3;
}

.search {
	width: 60%;
	margin: 1em auto;
	height: 3em;
	border: 4px solid #67B168;
	text-align: center;
	font-size: 1em;
}

.search:focus {
	outline: 0;
}

实现效果：