<span style="font-size:14px;">这个框架有听过好几次了,但自己没实现过,今天终于自己学了下,模仿写了这个过滤,妙味视频里面的
目前遇到的情况是用babel会丢失代码提示,但在浏览器中可视。
划分组件,组件链接
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<style type="text/css">
table th,
table td {
text-align: center;
}
</style>
<script>
</script>
<script src="./src/react.js"></script>
<script src="./src/react-dom.js"></script>
<script src="./src/browser.min.js"></script>//是使浏览器支持babel,大概是这样子比如<script type="text/bebal"></script>
<script src="./src/pubsub.js"></script>//一个订阅的js
</head>
<body>
<div class="container" id="studentInfo"></div>
<script type="text/babel">
var data = [
{stName:"小乐",gender:"女",age:18,height:165,weigth:45,_id:1},
{stName:"leo",gender:"男",age:35,height:180,weigth:80,_id:2},
{stName:"童童",gender:"女",age:22,height:171,weigth:60,_id:3},
{stName:"momo",gender:"男",age:26,height:175,weigth:70,_id:4},
{stName:"leo",gender:"女",age:18,height:170,weigth:50,_id:5},
{stName:"momo",gender:"女",age:38,height:166,weigth:50,_id:6},
{stName:"童童",gender:"男",age:30,height:175,weigth:65,_id:7}
]
var StudentApp = React.createClass({
<span style="color:#FF0000;"> getInitialState:</span>function(){//在实例创建时调用一次,用于初始化每个实例的<code>state</code>,此时可以访问<code>this.props</code>。
return {//注意react组件的生命周期
studentData:data,
genderValue:"all",
changeName:""
}
},
genderFilterhandle:function(e){//自定义函数
this.setState({genderValue:e.target.value});
},
nameFilter:function(e){//自定义函数
this.setState({changeName:e.target.value});
},
componentDidMount:function(){//在初始化渲染执行之后立刻调用一次
<span style="color:#FF9966;">PubSub.subscribe</span> ("deleteItem",function(evName, _id){//订阅
var newArr = this.state.studentData.filter(function(item){
return item._id!==_id;
});
this.setState({studentData:newArr});
}.<span style="background-color: rgb(255, 0, 0);">bind(this)</span>);---------绑定内层函数的this与外层是同一个 (*此处必须要有)
},
render: function(){//必选的方法,创建虚拟DOM
return (
<div>
<h1>学员信息表</h1>
<div className="bs-example">
<div className="form-group">
<label>按性别筛选</label>
<select className="form-control" onChange={this.genderFilterhandle}>
<option value="all">all</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div className="form-group">
<label>按名字筛选</label>
<input type="text" className="form-control" placeholder="请输入名字" onKeyUp={this.nameFilter}/>
</div>
</div>
<StudentInfoComponent
studentData = {this.state.studentData}
genderValue = {this.state.genderValue}
changeName = {this.state.changeName}
/>
</div>
)
}
});
var StudentInfoComponent = React.createClass ({
render:function(){
var List=[];
var genderVal = this.props.genderValue;
var genderArr = ["女","男"];
var nameFilt = this.props.changeName;
this.props.studentData.forEach(function(item, index){
if(genderVal!=="all" && nameFilt===""){
if(genderArr[genderVal] === item.gender){
List.push (<StudentItemComponent studentItem={item} key={index}/>)
}
return;
}
if(nameFilt!==""){
if(genderVal!=="all" ){
if(nameFilt===item.stName && genderArr[genderVal] === item.gender){
List.push (<StudentItemComponent studentItem={item} key={index}/>)
}
}else{
if(nameFilt===item.stName)
List.push (<StudentItemComponent studentItem={item} key={index}/>)
}
return ;
}
List.push (<StudentItemComponent studentItem={item} key={index}/>)
});
return (
<div className="table-responsive">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>身高(cm)</th>
<th>体重(kg)</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
{ List}
</tbody>
</table>
</div>
)
}
});
var StudentItemComponent = React.createClass({
<span style="color:#CC33CC;">deleteItem</span>:function(){
<span style="color:#FF0000;">PubSub.publish("<span style="background-color: rgb(51, 51, 255);">delete</span></span><span style="background-color: rgb(51, 51, 255);">Item</span>",this.props.studentItem._id)//发布消息
},
render:function(){
var item = this.props.studentItem;
return (
<tr>
<td>{item.stName}</td>
<td>{item.gender}</td>
<td>{item.age}</td>
<td>{item.height}</td>
<td>{item.weigth}</td>
<td><a href="javascript:;" onClick={this.<span style="color:#CC33CC;">deleteItem</span>}>删除</a> </td>
</tr>
)
}
});
ReactDOM.render(<StudentApp />,document.getElementById('studentInfo'));
</script>
</body>
</html>
</span>
React.js 之筛选篇
最新推荐文章于 2022-07-15 15:14:47 发布