【React】HTMLの<form>がjavascriptで送信されないように設定する方法

この記事について

Reactを学習し初めて気づいた点や、学んだ点を記録として残します。

HTMLの<form>がjavascriptで送信されないように設定する方法

<form>タグを使用すると、ブラウザのデフォルト機能として入力値が送信され、画面がリロードされます。

qiita.js

<div>
  return (
    <div>
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={enteredTodo}
          onChange={(e) => {
            setEnteredTodo(e.target.value);
          }}
        />
        <button>追加</button>
      </form>
    </div>
  );
};

例えば例の追加にある送信ボタンを押すと、その度に画面が更新されます。
このような送信イベントをキャンセルしたい場合は、formのonSubmitに設定されている関数に対して、preventDefaultというメソッドを呼びます。

qiita.js

const Form = ({ createList }) => {
  const [enteredTodo, setEnteredTodo] = useState("");
  const addTodo = (e) => {
    e.preventDefault();
    const newList = {
      id: Math.floor(Math.random() * 1e5),
      content: enteredTodo,
    };
    createList(newList);
    setEnteredTodo("");
  };

結果
preventDefaultメソッドを使うと送信イベントをキャンセルできる。