querySelectorとpreventDefaultを使ってみる

querySelector

input エリアの値は getElementById、e.target.value 以外にも、querySelector を使っても値を取得出来るみたいなので、試してみました。

• Document.querySelector()・mdn web docs

const keyDown = (e) => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました！")
    // const word = document.getElementById("textval").value
    //const word = e.target.value
    const word = document.querySelector("#textval").value;
    console.log(word);
  }
};

input エリアに id 属性が設定されているのであれば、#id 名を。クラス属性ならば、.クラス名を設定してあげます。

onSubmit

前回は e.key===Enter を使って Enter キーが押されたかを判断していました。

form タグを使っても可能な様なので、こちらも試してみる事に。

• フォーム（React Docs）
• HTMLFormElement: submit イベント（mdn web docs）

<form onSubmit={keyDown}>
  <input type="text" placeholder="検索ワードを入力" id="textval" />
</form>

form に onSubmit を設定

const keyDown = (e) => {
  const word = document.querySelector("#textval").value;
  //検索処理
};

これで試してみると…

input に検索語句を入力して Enter を押すと、ブラウザがリロードされるだけで、検索処理が行われませんでした。

preventDefault

• Event.preventDefault()（mdn web docs）

const keyDown = (e) => {
  const word = document.querySelector("#textval").value;
  e.preventDefault();
  //検索処理
};

preventDefault を設定する事で、ブラウザのリロードが行われなくなり、検索結果が無事表示されました。

form を使ってのやり方も分かりましたが、今回は e.key===Enter を使っての方法で行こうかと思っています。