Reactで入力中に検索結果をフィルタリングする方法

検索バーは、ユーザーが Web サイトで必要なものを見つけやすくする優れた方法です。また、訪問者が何を検索しているかを追跡する場合、分析にも適しています。

React を使用して、ユーザーの入力に応じてデータをフィルタリングして表示する検索バーを作成できます。 React フックと JavaScript の map および filter 配列メソッドを使用すると、応答性が高く機能的な検索ボックスが得られます。

今日のメイク動画

検索バーの作成

検索はユーザーからの入力を受け取り、フィルタリング機能をトリガーします。あなたはできる Formik のようなライブラリを使用して React でフォームを作成するですが、検索バーを最初から作成することもできます。

React プロジェクトがなく、フォローしたい場合は、create-react-app コマンドを使用して作成します。

Androidでスパム通話をブロックする方法

npx create-react-app search-bar

の中に App.js ファイルに、input タグを含むフォーム要素を追加します。

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

を使用する必要があります 使用状態 反応フックそしてその onChange 入力を制御するイベント。したがって、useState をインポートし、状態値を使用するように入力を変更します。

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

ユーザーが入力要素内に何かを入力するたびに、 ハンドル変更 状態を更新します。

入力変更時のデータのフィルタリング

検索バーは、ユーザーが提供するクエリを使用して検索をトリガーする必要があります。これは、handleChange 関数内でデータをフィルタリングする必要があることを意味します。また、状態でフィルター処理されたデータを追跡する必要があります。

まず、状態を変更してデータを含めます。

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

値ごとに 1 つ作成する代わりに、このように状態値をバンドルすると、レンダリングの数が削減され、パフォーマンスが向上します。

フィルタリングするデータは、検索を実行したいものであれば何でもかまいません。たとえば、次のようなサンプルブログ投稿のリストを作成できます。

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

あなたもすることができます API を使用してデータをフェッチする CDN またはデータベースから。

Chromeでハードウェアアクセラレーションは何をしますか

次に、handleChange() 関数を変更して、ユーザーが入力内に入力するたびにデータをフィルタリングします。

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

クエリが空の場合、関数は投稿を検索せずに投稿を返します。ユーザーがクエリを入力すると、投稿のタイトルにクエリテキストが含まれているかどうかがチェックされます。投稿のタイトルとクエリを小文字に変換すると、比較で大文字と小文字が区別されなくなります。

filter メソッドが結果を返すと、handleChange 関数はクエリテキストとフィルター処理されたデータで状態を更新します。

検索結果の表示

検索結果を表示するには、次を使用してリスト配列をループします。地図メソッドと各項目のデータを表示します。

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

ul タグ内で、コンポーネントはクエリが空かどうかをチェックします。そうである場合は、ユーザーが何も検索していないことを意味するため、空の文字列が表示されます。すでに表示されているアイテムのリストを検索する場合は、このチェックを外してください。

クエリが空でない場合、マップメソッドは検索結果を繰り返し処理し、投稿のタイトルを一覧表示します。

検索で結果が返されない場合に役立つメッセージを表示するチェックを追加することもできます。

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

このメッセージを追加すると、ユーザーが空白のスペースを見たままになることがなくなるため、ユーザーエクスペリエンスが向上します。

複数の検索パラメータの処理

React の状態とフックを JavaScript イベントと共に使用して、データ配列をフィルタリングするカスタム検索要素を作成できます。

フィルター関数は、クエリが配列内のオブジェクトの 1 つのプロパティ (タイトル) と一致するかどうかのみをチェックします。論理 OR 演算子を使用してクエリをオブジェクト内の他のプロパティと照合することにより、検索機能を向上させることができます。