React : Html Form

HTML에서 폼(Form)을 제출하기 위해서는 사용자가 폼 내의 입력 필드를 작성한 후 “Submit” 버튼을 클릭하거나, 폼 내에서 Enter 키를 누르면, 폼의 입력 데이터를 서버로 전송할 수 있습니다.

그러나, 만약 폼(Form) 내에 버튼이 위치하지 않고, 다른 영역에 위치한다면, 사용자가 Enter 키를 누를 때, 폼(Form)이 제출되지 않을 수 있습니다. 예를 들어, 입력 필드가 모달 창 내에 있다면, 모달 창 외부의 버튼을 누르면 폼(Form)이 제출되지 않게 됩니다. 이러한 문제를 해결하기 위해서는, 사용자가 “Submit” 버튼을 클릭할 수 있도록 폼(Form) 내에 “Submit” 버튼을 포함시키는 것이 좋습니다.

따라서, 폼(Form) 내에서 “Submit” 버튼을 클릭하거나 Enter 키를 누르면, 폼(Form)이 제출되도록 하기 위해서는, 버튼 태그가 폼(Form) 내부에 위치해야 합니다. 또한, 버튼 태그의 타입(type)을 “submit”으로 지정해주어야 합니다. 이렇게 하면, 폼(Form)을 제출하기 위한 버튼으로 지정되어, 사용자가 클릭하거나 Enter 키를 누를 때, 폼(Form)이 제출됩니다.

AddUser 추가 소스 예시

import { useState } from "react";

const AddUser = ({ onAddUser }) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const onSubmit = (event) => {
    event.preventDefault();
    if (name.trim() === "" || age.trim() === "") {
      return;
    }
    const newUser = { name: name, age: age };
    onAddUser(newUser);
    setName("");
    setAge("");
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="username">Username</label>
        <input
          type="text"
          id="username"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="age">Age (Years)</label>
        <input
          type="number"
          id="age"
          value={age}
          onChange={(event) => setAge(event.target.value)}
        />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
};

export default AddUser;