React(3)

1.案例选项卡

javascript 复制代码
import React, { Component } from 'react'

export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ]
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.tabList.map(item=>
                            <li key={item.id}>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }
}

进行样式修改:js引入css

css 复制代码
import './css/02_tab.css'
css 复制代码
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 50px;
    line-height: 50px;
    width: 100%;
}


ul li{
    flex:1;
    text-align:center
}

鼠标点击高亮显示

javascript 复制代码
.active{
    color: red;
}
javascript 复制代码
import React, { Component } from 'react'
import './css/02_tab.css'

export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ],
        currentKey:0
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.tabList.map((item,index)=>
                            <li key={item.id} className={this.state.currentKey==index?'active':''} onClick={()=>
                                this.handlerClick(index)
                            }>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }

    handlerClick(index){
        this.setState({
            currentKey:index
        })
    }
}

三个组件显示

新建三个组件

javascript 复制代码
import React, { Component } from 'react'

export default class Film extends Component {
    render() {
        return (
            <div>
                电影组件
            </div>
        )
    }
}
javascript 复制代码
import React, { Component } from 'react'
import './css/02_tab.css'

import Film from './tabComponent/film'
import My from './tabComponent/my'
import Cinema from './tabComponent/cinema'



export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ],
        currentKey:0
    }

    render() {
        return (
            <div>
                {this.showTable()}
                <ul>
                    {
                        this.state.tabList.map((item,index)=>
                            <li key={item.id} className={this.state.currentKey==index?'active':''} onClick={()=>
                                this.handlerClick(index)
                            }>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }

    handlerClick(index){
        this.setState({
            currentKey:index
        })
    }

    showTable(){
        switch(this.state.currentKey){
            case 0:
                return <Film></Film>
            case 1:
                return <Cinema></Cinema>
            case 2:
                return <My></My>
        }
    }
}

点击可以切换

2.请求数据

react中使用axios第三方的库 ,专门用来请求数据

先安装

javascript 复制代码
npm i axios
javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method:'get',
            headers:{
                'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host':'mall.film-ticket.cinema.list'
            }
        }).then(res=>{
            console.log(res)}
         ).catch(err=>console.log(err))


    }

    render() {
        return (
            <div>
                影院组件
            </div>
        )
    }
}

res.data

css 复制代码
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    background-color: white;
}


ul li{
    flex:1;
    text-align:center
}

.active{
    color: red;
}

dl{
    height: 50px;
    border-bottom: 1px solid gray;
}
dl dt{
    font-size: 20px;
}
dl dd{
    font-size: 12px;
    color: gray;
}
javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                {this.state.cinemaList.map((item) => 
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }
}

3.模糊搜索

利用input 属性onInput可以实时监测输入框变化

先尝试监控输入框改变并打印改变的内容

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>
                {this.state.cinemaList.map((item) =>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }

    handleInput(event){
        console.log("input",event.target.value);
    }
}

实时模糊搜索

数组的filter方法不会影响原数组

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: [],
            backcinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>
                {this.state.cinemaList.map((item) =>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }

    handleInput = (event) => {
        console.log("input", event.target.value);
        // 数组的filter方法不会影响原数组
        var newList = this.state.backcinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) ||
            item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({
            cinemaList:newList
        })
    }
}

4.setState说明

setState在同步代码使用时是异步的,在异步代码使用时同步的

也就说setState更新状态,可能react背后不是立即就更新state的 所以如果你再setState方法后紧随其后获取当前state中的值,可能会发现获取的值还是之前没更新的,更新并没有生效

方法:

如果是在同步执行代码中,可以使用setState的回调函数,回调函数中一定是已经更新完状态的

javascript 复制代码
    this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
    },()=>{
         //回调函数中执行你的需求       
    })

如果是在异步中就无所谓了

5.平滑滚动better-scroll

引入better-scroll库

javascript 复制代码
npm i better-scroll

作用就是使一个显示很长的数据可以在一个固定很短的区域中显示滑动 要求必须一个很短的区域 包裹一个很长的区域

就拿上文中的cinemaList来做

修改:

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'
import BetterScroll from 'better-scroll'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: [],
            backcinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
            })

            new BetterScroll(".wrapper")
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>

                <div className='wrapper' style={{height:'600px',overflow:'hidden'}}>
                    <div className='content'>
                        {this.state.cinemaList.map((item) =>
                            <dl key={item.cinemaId}>
                                <dt>{item.name}</dt>
                                <dd>{item.address}</dd>
                            </dl>
                        )}
                    </div>
                </div>

            </div>
        )
    }

    handleInput = (event) => {
        console.log("input", event.target.value);
        // 数组的filter方法不会影响原数组
        var newList = this.state.backcinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) ||
            item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({
            cinemaList: newList
        })
    }
}

此时滚动很丝滑 还带点惯性哈哈哈哈哈

相关推荐
Myli_ing44 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue