|<!-- -->flabaka.com

inputエリアの入力値に変化があったら、検索が行われる様にしてみた

inputエリアの入力値に変化があったら、検索が行われる様にしてみた

onKeyDown

input エリアに検索したい語句を入力して Enter キーを押すと、一致する記事が表示される。

今まではこんな感じでしたが、Enter キーを押さずに、記事の絞り込みがしたいなと。それも複数語句対応で。

const keyDown = e => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました!")
    const word = e.target.value
    //console.log(word)
    //検索処理
  }
}

onChange

input エリアの入力値に変化があった際に、onChange イベントを使って検索処理を走らせる様にしてみました。

const onChange = e => {
  const word = e.target.value
  //検索処理
}
return (
  <input
    type="text"
    placeholder="検索ワードを入力"
    onChange={e => onChange(e)}
  />
)

input エリアが空の場合は、投稿されている記事全てを表示させる。

何か入力されている場合は、その値を使って検索処理を走らせています。

検索語句はひとまず 3 語まで対応。

input に入力された値の受け渡しは useState を使っているんですが、useReducer を使った方がいいのかなぁ…

useReducer 、勉強せねば…

ひとまずこれで Enter キーを押さずとも、(自動的に)検索処理が走る仕様になりました。

©2022 flabaka.com