React에서 여러 입력을 처리하는 방법

18996 단어 webdevreactcodenewbie
나는 최근에 여러 입력으로 작업할 때 React Form을 리팩토링해야 했고 내가 한 방법을 공유해야겠다고 생각했습니다.

내 양식은 다음과 같습니다.



문제


  • 아래의 스타터 코드를 보십시오
    • .
  • 이 Form 구성 요소에는 총 5개의 입력 필드가 있습니다. 5가지 상태 및 5가지onChange 인라인 함수
  • 이것은 정확히 DRY 코드가 아닙니다 🙀

    • import React, { useState } from "react";

export default function Form() {
  const [newCompany, setCompany] = useState("");
  const [newPosition, setPosition] = useState("");
  const [newLink, setNewLink] = useState("");
  const [newDate, setNewDate] = useState("");
  const [newNote, setNewNote] = useState("");

  return (
        <form>
          <input
            value={newCompany}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
          <input
            value={newPosition}
            onChange={(e) => setPosition(e.target.value)}
            label="Job Title"
          />
          <input
            value={newLink}
            onChange={(e) => setNewLink(e.target.value)}
            label="Job Link"
          />
          <input
            type="date"
            value={newDate}
            onChange={(e) => setNewDate(e.target.value)}
          />
          <input
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            label="Note"
          />
          <button type="submit"> Submit </button>
        </form>
  );
}


  • 또한 나중에 reset 함수를 추가하려는 경우 내 코드는 다음과 같습니다. 🙅🏽‍♀️

    •   const reset = () => {
    setCompany("");
    setPosition("");
    setNewLink("");
    setNewDate("");
    setNewNote("");
  };


    해결책: 리팩토링 ✨



    1단계: 입력 기본값 추가 및 상태 초기화


  • 먼저 모든 입력 필드에 기본값을 추가하겠습니다
    • .
  • 어떻게 해야 합니까? 해당 값으로 객체 리터럴을 만들고 빈 문자열로 설정합니다.
  • 그런 다음 useState() React Hook을 사용하여 values 객체
    • 로 initialValues 상태를 초기화합니다.

  • 중요: 해당 값이 있는 모든 입력 필드에 value 속성을 추가해야 합니다(예: values={values.company} ).

    • const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  return (
        <form>
          <input
            value={values.company}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
 //...


    2단계: 다중 입력 변경 처리


  • 여기서 목표는 단일onChange 핸들러
    • 로 모든 입력을 처리하는 것입니다.
  • 입력 필드가 변경될 때마다 업데이트하고 추적하려면 handleInputChange 함수를 만들어야 합니다(아래 참조)
  • 여기서 무슨 일이 일어나고 있나요? (빠른 요약)
  • 먼저 객체 구조 분해를 사용하여 입력에서 name 및 value 특성을 가져오거나 추출합니다(아래 설명 참조 - 동일)
  • 그런 다음 values 함수와 spread operator
    • 를 사용하여 setValues() 상태 개체를 기존 값으로 업데이트합니다.
  • 그리고 마지막으로 ES6 구문value으로 트리거된 이벤트onChange의 [name]: value를 업데이트합니다.
  • 이것은 매우 중요한 단계입니다!
    입력에 name 속성을 추가해야 하며 여기서 [name]: value는 name와 동일한 동적company: e.target.value 속성 키(입력에서 가져온 - 예: value )를 설정한다는 의미입니다. 현재 입력 상태입니다.


    • 참조: React Docs

     //... 

  const handleInputChange = (e) => {
    //const name = e.target.name 
    //const value = e.target.value 
    const { name, value } = e.target;

    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company" //IMPORTANT 
            label="Company"
          />
   // ...


    3단계: 입력 필드에 handleInputChange 추가


  • 모든 입력 필드
    • 의 handleInputChange prop에 onChange 함수를 추가합니다.
  • 최종 코드를 보십시오. 이것은 훨씬 깨끗하고 관리하기 쉬운 양식입니다 👌🏽

    • import React, { useState } from "react";

const initialValues = {
  company: "",
  position: "",
  link: "",
  date: "",
  note: "",
};

export default function Form() {
  const [values, setValues] = useState(initialValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  return (
        <form>
          <input
            value={values.company}
            onChange={handleInputChange}
            name="company"
            label="Company"
          />
          <input
            value={values.position}
            onChange={handleInputChange}
            name="position"
            label="Job Title"
          />
           // ... Rest of the input fields
          <button type="submit"> Submit </button>
        </form>
  );
}


    도움이 되었기를 바랍니다. 모든 의견과 피드백을 환영합니다! 🎊
    Mecab에서 자신의 트윗을 형태소 해석하고 빈번한 일반 명사를 나열합니다.
    Raspberry Pi 로봇에게 얼굴 식별과 감정 인식을 한다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage