文章目錄

前言

一、基本功能的實現

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也是我在學習的過程中看到的，進行一次記錄學習，小伙伴們可以自己試一下。

總結

以上是生活随笔為你收集整理的简单的模糊搜索案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。