React(3)

1.案例选项卡

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

import './css/02_tab.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
}

鼠标点击高亮显示

.active{
    color: red;
}

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

三个组件显示

新建三个组件

import React, { Component } from 'react'

export default class Film extends Component {
    render() {
        return (
            <div>
                电影组件
            </div>
        )
    }
}

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第三方的库 ，专门用来请求数据

先安装

npm i axios

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

*{
    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;
}

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可以实时监测输入框变化

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

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方法不会影响原数组

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的回调函数，回调函数中一定是已经更新完状态的

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

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

5.平滑滚动better-scroll

引入better-scroll库

npm i better-scroll

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

就拿上文中的cinemaList来做

修改：

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

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