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 キーを押さずとも、（自動的に）検索処理が走る仕様になりました。