Fuzzy-Suche in React
Kürzlich arbeitete ich an einem React-Projekt auf hoher Ebene und musste eine Fuzzy-Suche durchführen. Ich habe zu viel über Vue geschrieben und immer nach V-Modell gefragt. Ich war so besorgt, dass ich einen Blog schreiben werde um dieses einfache Problem aufzuzeichnen. Persönlich legt React immer noch Wert auf JavaScript-Kenntnisse, daher habe ich ~~Ich war so beschäftigt ~~ natives JS verwendet, um diese Fuzzy-Suche zu schreiben.
Der erste Schritt besteht darin, den Status zum Speichern der Daten zu bestimmen:
constructor()
{
super()
this.state={
cinemalist:[], //这个用于渲染dom数据
alllist:[] //做一个数据备份，是我用来解决数组内容缺失的手段
}
}
Dann rendern Sie einfach die Daten und legen Sie ein Eingabefeld fest:
render() {
return (
<div>
<input onInput={
this.getinput.bind(this)}></input> //需要使用bind来使得this指向当前的组件，防止后续函数内的this出现误解
<ul>
{
this.state.cinemalist.map(item=><li key={
item.cinemaId}>{
item.name}--{
item.address}</li>)}
</ul>
</div>
)
}
Hier ist der CSS-Code für das Eingabefeld:
input{
width: 90%;
height: 30px;
margin-left: 3%;
outline: none;
font-size: 18px;
color: gray;
background-color:aliceblue;
border: none;
margin-top: 10px;
border-radius: 15px;
padding-left: 15px;
}
Dann ist der Rest Logik. Hier binde ich ein Eingabeereignis in die Eingabe. Sobald die Eingabe die entsprechende Funktion auslöst, verwende ich gleichzeitig das integrierte Ereignisereignis, um die erforderlichen Parameter zu erhalten, nämlich event.target.value um den Eingabewert zu erhalten. Verwenden Sie dann die Filterfunktion, um relevante Begriffe einschließlich der Suchschlüsselwörter herauszufiltern, und setstate ändert dann den entsprechenden Status. Eines sollten wir jedoch berücksichtigen: Da der Inhalt des Arrays nach jeder Filterung reduziert wird, stimmt der nachfolgende Suchinhalt des Benutzers nicht überein, dh der Inhalt des Arrays fehlt, was offensichtlich falsch ist. Meine Lösung besteht darin, ein Array zu öffnen, um alle erhaltenen Daten zu speichern, und ein anderes Array zu öffnen, um speziell den Dom zu rendern. Gleichzeitig verwende ich bei jeder Suche das Array, das alle Daten enthält, zum Filtern und aktualisiere dann das Rendering dom. Für dieses Array lautet der Code wie folgt:
getinput(e)
{
var oldlist=this.state.alllist
oldlist=oldlist.filter(item=>item.name.includes(e.target.value))
this.setState({
cinemalist:oldlist
})
}
Es ist zu beachten, dass der Code hier beim Filtern die Groß-/Kleinschreibung von englischen Buchstaben nicht berücksichtigt. Wenn der Inhalt, den Sie einschließen, besondere Aufmerksamkeit auf die Groß-/Kleinschreibung erfordert, müssen Sie die Filterbedingungen im Inneren verarbeiten.
Ein weiterer hervorzuhebender Punkt ist, dass, da die asynchronen und synchronen Bedingungen von setstate unterschiedlich sind, Sie setstate in einer asynchronen Umgebung platzieren müssen, wenn Sie sicherstellen müssen, dass der Status aktualisiert wurde, bevor Sie einige Aktionen ausführen. Diese Methode kann ich jedem empfehlen ist ein Timer, und ich werde später einen Blog schreiben, um über die Synchronisation und asynchrone Probleme der Statusaktualisierung in React zu sprechen.
Das war's für den heutigen Austausch~