学习记录——react类似百度搜索的小练习(数据筛选)

这篇博客记录了使用React实现类似百度搜索的实时数据筛选功能。通过在state中模拟数据,结合onChange事件监听input输入,动态匹配并显示包含输入字符的元素。文中详细介绍了在遍历过程中处理this指向问题的三种方法,并提供了示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

先在state里模拟一个数据,用于搜索。
然后写一个input框,添加onChange监听事件,当我们输入内容的时候,会自动去匹配数据,如果包含一样的字就显示出来。
在这里插入图片描述
然后要做的是在input框输入值的同时,遍历listDog数组,看有没有输入的那个值。
如果有的话,显示出包含那个值的所有元素,如果没有则返回一个空数组。默认刚打开页面是空的。
可以先封装一个回调,注意在回调里的this的指向问题。可以写一个button来观察this
在这里插入图片描述
在这里插入图片描述

知识点-改变this指向的三种方法

  • 方式1:把方法变成剪头函数 名字=()=>{}
  • 方法2:在事件中 调用方法的时候.bind(this) 好处是可以传值 onClick={ this.xxx回调函数.bind(this) }
  • 方法3:在构造函数中直接绑定this
    在这里插入图片描述
    继续写遍历数组的逻辑:
    在这里插入图片描述
import React, { Component } from 'react';

class Search extends Component {

    constructor(props) {
        super(props);

        //在最开始的时候 把方法绑定给this
        this.filterDog = this.filterDog.bind(this);

        //方式1 把方法变成箭头函数
        //方式2 事件中 调用方法的时候 .bind(this) 可以传值
        //方式3 在构造函数中直接绑定this
    }


    state = {
        inputValue: '',
        listDog: ['哈士奇', '哈士奇短毛', '哈士奇长毛',
            '雪纳瑞', '雪纳瑞白色', '雪纳瑞黑色',
            '金毛', '狗阿拉斯加',
            '狗拉布拉多', '拉布拉多卡其色']
    };


    //改变this指向 另一个写法
    //初始的时候绑定一下this 在构造函数constructor里写
    filterDog(key) {
        console.log(this)
        

        //遍历this.state.listDog
        return !key?[]:this.state.listDog.filter(item => item.includes(key));
    }


    render() {
        let {inputValue} = this.state;
        return (
            <div>
                <input type="text" onChange={(ev) => {
                    this.setState({
                        inputValue: ev.target.value
                    })
                }} />

                <button onClick={this.filterDog}>看看this</button>

                <ul>
                    {
                        this.filterDog(inputValue).map(item=>(<li key={item}>
                            <h3>{item}</h3>
                        </li>))
                    }
                </ul>
            </div>
        );
    }
}

export default Search;

### Next.js 实战项目案例或教程 以下是关于 Next.js 的一些实际应用案例和教程资源: #### 1. **Next.js 演示商店项目** 该项目是一个基于 Next.js 和 Moltin API 构建的电子商务前端展示店[^1]。它提供了完整的源码以及详细的文档说明,适合开发者学习如何构建一个现代化的电商网站。 项目地址:[https://gitcode.com/gh_mirrors/ne/nextjs-demo-store](https://gitcode.com/gh_mirrors/ne/nextjs-demo-store) 此项目的核心功能包括商品列表显示、购物车管理、订单提交等。通过阅读其代码结构可以了解 Next.js 中 `getStaticProps` 和 `getServerSideProps` 的实际应用场景。 --- #### 2. **精简项目入门指南** 对于初学者来说,理解 Next.js 的目录结构调整非常重要。按照官方推荐的最佳实践,项目的入口文件通常位于 `src/pages/_app.js` 文件中[^2]。这使得开发者能够更灵活地自定义全局布局和状态管理逻辑。 如果希望快速上手并熟悉 Next.js 的基本架构设计,则可以从简单的博客系统或者个人主页类的小型项目入手练习。 --- #### 3. **数据处理与交互优化** 在复杂的应用场景下,掌握高效的数据获取方式至关重要。例如,在文章提到的一个系列教程里介绍了有关筛选条件配置及其 UI 控件实现方法的内容[^3]。这些技巧可以帮助提升用户体验的同时也增强了系统的可维护性。 此外还涉及到了 GraphQL 查询语言集成到 React 应用中的过程分析;这对于那些计划采用 Headless CMS 解决方案的人来说尤为有价值。 --- ```javascript // 示例代码片段展示了如何利用 getServerSideProps 来动态加载页面所需的数据 export async function getServerSideProps(context) { const res = await fetch(`https://api.example.com/items`); const items = await res.json(); return { props: { items }, // 将解析后的 JSON 对象作为组件属性传递下去 }; } ``` 上述例子简单示范了服务器端渲染技术是如何工作的——即每次请求都会重新执行这段函数从而返回最新版本的信息给客户端呈现出来。 --- #### 总结 综上所述,无论是想深入研究框架本身特性还是寻求灵感来开发属于自己的 web app ,都可以从上面列举出来的几个方向找到合适的切入点 。 不仅限于理论知识的学习,更重要的是动手去做具体的实例操作才能真正提高技术水平!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值