文章目录

前言

一、基本功能的实现

1.初始化

2.搜索

 3.清空再次搜索

 4.完整代码如下

二、解决方法（简单）

        1.进行原数据的备份

        2.操作备份数据

        3.修改过后完整代码

---

前言

此案例是一个简单的模糊搜索功能，记录的点是怎么保持原数组不改变。

一、基本功能的实现

1.初始化

正常情况下input没有值的时候页面因该为其他样式，由于是demo就将所有的都展示出来了

2.搜索

当我搜索“ab”时是可以通过过滤来实现模糊搜索，此时是没问题的。问题在下一步。

 3.清空再次搜索

当清空输入框在此搜索“e”时内容就不见了，这个原因也非常简单因为前两次搜索都会将原数组不停的过滤掉。

 

 4.完整代码如下

import React, { Component } from "react"; import './index.css' class index extends Component { myers = React.createRef();state = {list: [{ id: 1, name: "a" },{ id: 2, name: "ab" },{ id: 3, name: "abc" },{ id: 4, name: "d" },{ id: 5, name: "e" },{ id: 6, name: "f" },],const: '',};changeInput = ( e)=>{this.setState({const: e.target.value})}// 模糊搜索search = () => {const { list} = this.state;const newList = list.filter((item) => {return item.name.includes(this.state.const)});this.setState({ list: newList });};render() {return (<div style={{border:'1px solid black ',width:'300px',height:'400px'}}><input type="text" value={this.state.const} onChange={(e)=>this.changeInput(e)} /><button onClick={this.search}>搜索</button><ul>{this.state.list.map((item,index)=>{return <li key={index}>{item.name}</li>})}</ul></div>);} }export default index;

二、解决方法（简单）

1.进行原数据的备份

       我们需要在state中新建一个状态作为备份

        

state = {list: [{ id: 1, name: "a" },{ id: 2, name: "ab" },{ id: 3, name: "abc" },{ id: 4, name: "d" },{ id: 5, name: "e" },{ id: 6, name: "f" },],backList:[{ id: 1, name: "a" },{ id: 2, name: "ab" },{ id: 3, name: "abc" },{ id: 4, name: "d" },{ id: 5, name: "e" },{ id: 6, name: "f" },],//备份数组const: '',};

2.操作备份数据

在search函数中我们只对备份数组进行操作，这样就可以实现清空输入框后在此搜索的效果了

// 模糊搜索 search = () => {const { backList} = this.state;const newList = backList.filter((item) => {return item.name.includes(this.state.const)});this.setState({ list: newList });};

3.修改过后完整代码

import React, { Component } from "react"; import "./index.css"; class index extends Component {myers = React.createRef();state = {list: [{ id: 1, name: "a" },{ id: 2, name: "ab" },{ id: 3, name: "abc" },{ id: 4, name: "d" },{ id: 5, name: "e" },{ id: 6, name: "f" },],backList: [{ id: 1, name: "a" },{ id: 2, name: "ab" },{ id: 3, name: "abc" },{ id: 4, name: "d" },{ id: 5, name: "e" },{ id: 6, name: "f" },], //备份数组const: "",};changeInput = (e) => {this.setState({ const: e.target.value });};// 模糊搜索search = () => {const { backList } = this.state;const newList = backList.filter((item) => {return item.name.includes(this.state.const);});this.setState({ list: newList });};render() {return (<divstyle={{ border: "1px solid black ", width: "300px", height: "400px" }}><inputtype="text"value={this.state.const}onChange={(e) => this.changeInput(e)}/><button onClick={this.search}>搜索</button><ul>{this.state.list.map((item, index) => {return <li key={index}>{item.name}</li>;})}</ul></div>);} }export default index;

---

总结

这个demo也是我在学习的过程中看到的，进行一次记录学习，小伙伴们可以自己试一下。

总结

以上是生活随笔为你收集整理的简单的模糊搜索案例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。