【React】preventDefaultについて【JavaScript】

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

preventDefaultについて

preventDefaultとは

preventDefaultとは、イベントに対するデフォルトの動作を止めるメソッドです。
以下のように記述することで、フォームに入力しEnterが押下された際にページがリロードされないようにできます。

input.jsx

import React from 'react';
import { v4 as uuid } from 'uuid';
import { createTodo } from '../../../lib/api/Todo';

export const TaskAddInput = ({
  inputText,
  setInputText,
  setTaskList,
  taskList
}) => {

  const handleSubmit = async (event) => {
    const taskId = uuid();
    // 画面の更新を制御
    event.preventDefault();
    if(inputText === ""){
      return;
    };
      // taskCardを追加する
      setTaskList([
        // 既存の配列
        ...taskList,
        {
          // 既存の配列にinputTextを追加
          draggableId: `task-${taskId}`,
          titile: inputText,
        }
      ]);
      // フォームを空にする
      setInputText("");
    // データ送信
    try {
      const res = await createTodo(taskList)
      console.log(res)
    } catch (error) {
      console.log(error)
    }
  }



  const handleChange = (event) => {
    setInputText(event.target.value);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="タスクを追加"
          className='taskAddInput'
          onChange={handleChange}
          value={inputText}
        />
      </form>
    </div>
  );
}