React(3)

已于 2023-07-31 16:19:42 修改
阅读量1.8k 收藏 1
点赞数
分类专栏： react 文章标签： react.js javascript 前端
于 2023-07-16 16:28:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzj1314/article/details/131748206
版权

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

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

Java-请多指教
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React3
03-18
React3
react-利用d3js绘制漂亮的React3D饼状图
08-15
利用d3js绘制漂亮的React 3D饼状图
使用typecrpitReact3d饼图/甜甜圈图-React开发
05-27
带有typecr图的React 3d饼图/甜甜圈图带有工具提示和打字稿的SVG 3D饼图/甜甜圈图演示https://woles.github.io/react-pie3d-demo/要求react> = 16.8.0安装npm我React 3d饼图/甜甜圈带有类型提示的图表带有工具提示和...
react-carousel-3d:React中的 3D carousal 组件
07-23
React 3D Carousel 组件React中的 3D 轮播组件（支持滑动）。演示 jsfiddle ( )安装新产品经理 npm i 3d-react-carousal纱 yarn add 3d-react-carousal在 public.html 中为箭头添加 fa-css <link href=...
Threejs + React 实现3D室内看房.zip
05-16
Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev ...
React如何配置路由
最新发布
weixin_47121832的博客
06-15 131
react配置路由方法
（四）React组件、useState、组件样式
二进制杯莫停的博客
06-09 292
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间。组件化开发可以让开发者像搭积木一样构建一个完整的庞大应用。
React中数据响应式原理
linzhongshu的专栏
06-10 356
在React中，数据响应式是通过组件的状态（State）和属性（Props）来实现的。当状态或属性发生变化时，React会自动重新渲染组件，以确保UI与数据保持同步。这种机制背后的原理是React的虚拟DOM（Virtual DOM）。虚拟DOM是一个轻量级的JavaScript对象，它是实际DOM的抽象。React通过比较新旧虚拟DOM的差异，计算出最小的更新操作，然后应用到实际DOM上。这大大减少了直接操作DOM的次数，提高了性能。
（三）React事件
二进制杯莫停的博客
06-09 484
语法：事件绑定的位置改造成箭头函数的写法，再执行clickHandler实际处理业务函数的时候传递实参注意：不能直接写函数调用，这里事件绑定需要一个函数引用。
React基础教程(06)：Ref的应用
WwLK123的博客
06-12 286
react的Ref应用的简单介绍。
如何在React中创建自定义Hooks
读心悦
06-09 197
自定义Hooks是一种让你在组件之间复用状态逻辑的代码片段，而不会增加额外的渲染开销或破坏组件的封装性。：在你的代码中创建一个函数，该函数接受参数并返回React组件可以使用的状态、副作用等。你可以在这个函数内部使用React的其他Hooks，如。：在你的React组件中，像使用其他Hooks一样使用你的自定义Hook。将Hook的返回值用于你的组件逻辑中。开头，这是一个约定俗成的命名规则，以便让其他人更容易地识别出这是一个Hook。组件中使用这个自定义Hook，并将返回的鼠标位置渲染到页面上。
React基础教程：TodoList案例
WwLK123的博客
06-12 676
react的状态state学习的经典案例：todolist
【react】useState 使用指南
读心悦
06-11 324
useState基本语法// ...return (// JSX, 可以使用 state 和 setState其中，是传递给useState的初始状态值。2.初始化状态* 可以使用默认值初始化状态，如`useState(0)`或`useState('')`。* 也可以使用函数返回初始值，这在初始值的计算较为复杂或需要基于props初始化时特别有用。例如：`useState(() => someExpensiveComputation())`。读取状态可以通过解构的变量（在上述示例中为。
【react】react-redux 使用指南
读心悦
06-12 657
React-Redux 是为 React 框架设计的一个状态管理库，它基于 Redux，但提供了更加便捷的方式来与 React 组件进行交互。通过 React-Redux，你可以在整个应用程序中维护一个单一的数据源（即 Redux Store），并通过 action 和 reducer 来管理这个数据源的状态。然后，通过 npm 或 yarn 安装 Redux 和 React-Redux。）将 Redux 的 state 和 dispatch 方法连接到具体的 React 组件中。
react 0至1 基础使用
m0_60559048的博客
06-11 295
11、.useEffect-不同依赖项下的执行时机。10.useEffect-概念理解和基础使用。12、useEffect-清除副作用。5. useRef 获取真是dom。13.封装自定义Hook。
React组件通信方式总结
猫老板的豆
06-11 434
Redux 是一个用于管理 JavaScript 应用程序中状态（state）的库，它提供了一种可预测的方式来更新应用程序的状态，类似 Vue 中的。：父组件维护一个状态（state），这个状态将被传递给两个兄弟组件。无论是类组件还是函数式组件，父组件向子组件传递数据的方式都是使用。无论是类组件还是函数式组件，子组件向父组件传递数据的方式都是通过。：（即：组件A是订阅者，组件B是发布者，先订阅再发布）），然后在组件树中的某个位置。时，一般会使用第三方库。在使用 React 的。
iOS ReactiveCocoa MVVM
征战无悔人生
06-12 920
ReactiveCocoa 下 MVVM简单使用。
React 渲染流程分析
hawk2014bj的博客
06-12 341
React 渲染流程代码比较多，入口在 Root.render，并发执行 Render，同步执行 Commit。
react 0至1 【jsx】
m0_60559048的博客
06-11 400
【代码】react 0至1 【jsx】
如何使用react d3创建一个柱状图
06-02
3. 准备数据：创建一个包含数据的数组。 ```javascript var data = [ {label: 'A', values: [{x: 'A', y: 10}]}, {label: 'B', values: [{x: 'B', y: 20}]}, {label: 'C', values: [{x: 'C', y: 30}]}, {label:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java-请多指教

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值