React でのあいまい検索
最近、高レベルの React プロジェクトに取り組んでいて、あいまい検索をする必要がありました。vue について書きすぎて、いつも v-model を要求していました。とても不安だったので、ブログを書きますこの単純な問題を記録します。個人的には、React は依然として JavaScript の熟練度を重視しているため、~~とても忙しかった~~ ネイティブ JS を使用してこのあいまい検索を作成しました。
最初のステップは、データを保存する状態を決定することです。
constructor()
{
super()
this.state={
cinemalist:[], //这个用于渲染dom数据
alllist:[] //做一个数据备份，是我用来解决数组内容缺失的手段
}
}
次に、データをレンダリングして入力ボックスを設定するだけです。
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>
)
}
入力ボックスの CSS コードは次のとおりです。
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;
}
残りはロジックです。ここでは、入力イベントを入力にバインドします。入力が対応する関数をトリガーしたら、同時に、組み込みイベント イベントを使用して必要なパラメーター (event.target.value) を取得します。入力値を取得し、フィルター関数を使用して検索キーワードを含む関連する用語を除外し、setstate で対応する状態を変更します。ただし、考慮すべきことが 1 つあります。つまり、フィルタリングのたびに配列の内容が減少するため、ユーザーのその後の検索内容は一致しません。つまり、配列の内容が欠落しており、これは明らかに間違っています。私の解決策は、配列を開いて取得したすべてのデータを保存し、別の配列を開いて特に dom をレンダリングすることです。同時に、検索するたびに、すべてのデータを含む配列を使用してフィルタリングし、レンダリングを更新します。その配列のコードは次のとおりです。
getinput(e)
{
var oldlist=this.state.alllist
oldlist=oldlist.filter(item=>item.name.includes(e.target.value))
this.setState({
cinemalist:oldlist
})
}
ここのコードではフィルタリング時に英字の大文字と小文字が考慮されていないことに注意してください。含めるコンテンツで大文字と小文字に特別な注意が必要な場合は、内部でフィルタ条件を処理する必要があります。
もう 1 つ強調すべき点は、setstate の非同期条件と同期条件が異なるため、アクションを実行する前にステータスが更新されていることを確認する必要がある場合は、setstate を非同期環境に配置する必要があるということです。誰もがタイマーを使用しています。React でのステータス更新の同期と非同期の問題については、後でブログを書きます。
今日のシェアはここまでです~