React에서 제출한 후 양식 지우기

오늘날 웹사이트는 사용자의 관심을 끌기 위해 서로 경쟁해야 합니다. 사용자는 응용 프로그램 사용 방법을 파악하는 데 너무 어렵게 생각하기를 원하지 않습니다.

React 앱은 매우 빠르기 때문에 프레임워크로 React를 선택하는 것이 좋습니다.

React에서 제출한 후 양식 지우기

대부분의 React 애플리케이션은 어떤 식으로든 양식을 사용합니다. React는 JavaScript를 기반으로 하지만 React 웹 애플리케이션의 양식은 다른 프레임워크나 기본 JavaScript와 다르게 처리됩니다.

React에서 양식을 성공적으로 구현하려면 몇 가지 React 관련 세부 정보를 알아야 합니다.

이 문서에서는 양식을 제출한 후 내용을 지워야 하는 경우의 사용 사례에 대해 설명합니다. 예를 들어, 사용자가 할 일을 제출해야 하는 경우 양식을 작성하고 제출하면 사용자가 백지 상태에서 타이핑을 시작할 수 있도록 양식을 지워야 합니다.

제어되는 구성 요소

제출된 양식을 지우는 방법을 논의하기 전에 제어 구성 요소의 개념을 설명해야 합니다. 이것은 상태가 입력 값을 제어하는 때입니다.

예를 들어 <text> 입력에 대한 onChange 이벤트 핸들러를 설정하여 사용자가 새 문자를 입력하거나 삭제할 때마다 상태를 업데이트할 수 있습니다.

양식을 제출할 때 현재 상태에서 제출된 사용자 입력을 지워야 합니다. 이는 전체 상태를 삭제한다는 의미가 아니라 해당 상태에 연결된 임시 텍스트 필드 값만 삭제한다는 의미입니다.

제출 후 양식 지우기 예

이것은 양식을 제출한 후 양식을 지우는 간단한 예입니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  const [names, setNames] = useState([]);
  const handleChange = (e) => {
    setName(e.target.value);
  };
  const handleClick = () => {
    setNames([...names, name]);
    setName("");
  };
  return (
    <div className="App">
      <p>Enter a name</p>
      <input type="text" value={name} onChange={(e) => handleChange(e)}></input>
      <br></br>
      <br></br>
      <button onClick={() => handleClick()}>Add Name</button>
      {names.map((name) => (
        <h1>{name}</h1>
      ))}
    </div>
  );
}

이 라이브 데모에서 볼 수 있듯이 사용자가 자신의 이름을 입력해야 하는 간단한 텍스트 입력이 있습니다. 이름 추가라는 버튼도 있습니다.

사용자가 필드에 이름을 입력하고 버튼을 클릭할 때마다 해당 이름이 목록에 표시되고 입력 필드가 지워집니다.

useState() 후크를 사용하여 name 및 names이라는 두 가지 상태 변수와 이를 업데이트하기 위한 해당 함수를 생성합니다.

name 상태 변수의 값은 입력 필드에 연결됩니다. 필드에 입력된 새 문자는 이름 상태 변수의 값을 업데이트합니다.

names 상태 변수는 빈 배열로 초기화됩니다. 사용자가 해당 버튼을 클릭할 때마다 텍스트 필드에 입력된 현재 값이 배열에 추가되도록 handleClick 이벤트 핸들러를 설정합니다.

가장 중요한 것은 handleClick() 함수에서 setName() 함수를 사용하여 name 상태 변수의 값을 빈 문자열로 재설정합니다. 텍스트 입력 필드의 값은 상태 변수에 연결되어 있으므로 빈 문자열을 반영하기 위해 비어 있습니다.