React.js 之筛选篇

最新推荐文章于 2024-06-11 09:40:25 发布

秋桜呢~

最新推荐文章于 2024-06-11 09:40:25 发布

阅读量7.2k

点赞数 5

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/Sugar_Elina/article/details/51921766

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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>

秋桜呢~

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
React.js 之筛选篇

这个框架有听过好几次了，但自己没实现过，今天终于自己学了下，模仿写了这个过滤，妙味视频里面的目前遇到的情况是用babel会丢失代码提示，但在浏览器中可视。划分组件，组件链接 table th, table td { text-align: center; }
复制链接

扫一扫