🔍
ページ内の文字列を検索してフィルタリングするコンポーネント
ページ内の文字列を検索して、それだけ残す
こんなかんじに検索して、絞り込むものを作ります。
前提として、環境は
・Next.js
・TypeScript
となっています。
※アイコンとかは違うコンポーネントなので省略して書きます。
index.tsx
import styles from './SearchForm.module.scss'
import cn from 'classnames'
export interface Props = {
placeholder?: string
className?: string
id?: string
onInput?: (e: React.FormEvent<HTMLInputElement>) => void
}
export const SearchForm: React.FC<Props> = ({ className, placeholder, id, onInput }) => (
<form className={cn(styles.default, className)}>
<input name="search" type="text" placeholder={placeholder} id={id} onInput={onInput} />
</form>
)
このように検索するinputタグのコンポーネントを作ります。
これはまだ、外観を用意しただけで、実際に動かすのはimportされたコンポーネント内です。
pages/index.tsx
import SearchForm from '~/components/domains/SearchForm'
const CityListPage: NextPage = () => {
// 入力キーワードをState化する
const [searchKeyword, updateSearchKeyword] = React.useState('')
// 入力イベントに反応してStateを更新する
const onInput = (event: React.FormEvent<HTMLInputElement>) => {
// 入力キーワードをstateに格納する
updateSearchKeyword(event.currentTarget.value)
}
const filteredList = cities.filter((item) => {
// 文字列の部分一致するものだけを残す
return new RegExp(searchKeyword).test(item.name)
})
return (
<SearchForm placeholder="市郡を検索する" onInput={onInput} />
<div>
// ここでマッピングして表示されることとなります
{filteredList.map((item, key) => {
return (
...
)
})}
</div>
)
}
export default CityListPage
これで、実装は出来たかと思います。
このページを参考に、日本語の文字列で検索できるようにアレンジを加えました。
Discussion