인턴 레벨: React에서 양식 관리-JS 튜토리얼-php.cn

Intern level: Managing Forms in React

양식은 웹 애플리케이션에서 사용자 입력을 수집하는 데 필수적입니다. 제어되는 구성 요소와 제어되지 않는 구성 요소, 양식 유효성 검사 및 복잡한 양식 처리의 기본 사항을 이해하면 React에서 양식을 관리하는 것은 간단할 수 있습니다. 이 가이드는 React에서 양식 관리를 시작하는 데 도움이 될 것입니다.

제어되는 구성 요소

제어되는 구성 요소는 구성 요소의 상태에 따라 양식 데이터가 처리되는 구성 요소입니다. 이는 입력 값이 React에 의해 제어된다는 의미입니다.

상태를 사용하여 양식 데이터 처리

제어 구성요소를 생성하려면 양식 데이터의 상태를 설정하고 사용자 입력에 따라 상태를 업데이트해야 합니다.

예:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

로그인 후 복사

이 예에서 양식 입력은 이름 및 이메일 상태 변수에 의해 제어됩니다. onChange 이벤트 핸들러는 사용자가 입력 필드에 입력할 때마다 상태를 업데이트합니다.

제어되지 않는 구성요소

제어되지 않는 구성 요소는 DOM 자체에서 양식 데이터를 처리하는 구성 요소입니다. refs를 사용하면 DOM 요소에서 직접 양식 데이터에 액세스할 수 있습니다.

Refs를 사용하여 양식 데이터에 액세스

제어되지 않는 구성 요소를 만들려면 useRef 후크를 사용하여 양식 요소에 대한 참조를 만듭니다.

예:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

로그인 후 복사

이 예에서 nameRef 및 emailRef 참조는 양식이 제출될 때 DOM 요소에서 직접 입력 값에 액세스하는 데 사용됩니다.

양식 검증

사용자 입력이 제출되기 전에 필수 기준을 충족하는지 확인하려면 양식 유효성 검사가 필수적입니다.

기본 검증 기술

양식의 제출 핸들러에서 입력 값을 확인하여 기본 유효성 검사를 추가할 수 있습니다.

예:

import React, { useState } from 'react';

const BasicValidationForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!name) newErrors.name = 'Name is required';
    if (!email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert(`Name: ${name}, Email: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default BasicValidationForm;

로그인 후 복사

이 예에서 유효성 검사 기능은 이름과 이메일 필드가 비어 있는지 확인하고 그에 따라 오류 메시지를 설정합니다.

양식 검증을 위한 타사 라이브러리

Formik 및 Yup과 같은 타사 라이브러리를 사용하면 양식 유효성 검사를 단순화할 수 있습니다.

Formik 및 Yup의 예:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const FormikForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;

로그인 후 복사

이 예에서는 Formik과 Yup을 사용하여 양식 상태 및 유효성 검사를 처리합니다. Formik은 유연하고 쉬운 양식 관리 방법을 제공하고 Yup은 유효성 검사 스키마 정의를 돕습니다.

복잡한 양식 관리

다단계 양식 관리

다단계 양식 관리에는 양식 상태 처리 및 단계 간 탐색이 포함됩니다.

예:

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: '',
  });

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};

export default MultiStepForm;

로그인 후 복사

이 예에서는 양식 상태가 여러 단계에 걸쳐 관리됩니다. nextStep 및 prevStep 함수는 단계 간 탐색을 처리합니다.

양식에서 파일 업로드 처리

파일 업로드 처리에는 파일 입력 요소를 사용하고 업로드된 파일을 구성 요소 상태로 관리하는 작업이 포함됩니다.

예:

import React, { useState } from 'react';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      alert(`File name: ${file.name}`);
    } else {
      alert('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>


 <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FileUploadForm;

로그인 후 복사

이 예에서 handlerFileChange 함수는 선택한 파일로 상태를 업데이트하고, handlerSubmit 함수는 양식 제출을 처리합니다.

결론

React에서 양식 관리에는 제어된 구성 요소와 제어되지 않은 구성 요소를 이해하고, 양식 유효성 검사를 구현하고, 복잡한 양식을 처리하는 작업이 포함됩니다. 이러한 개념을 익히면 React 애플리케이션에서 강력하고 사용자 친화적인 양식을 만들 수 있습니다. 인턴으로서 이러한 영역에서 탄탄한 기초를 다지면 React 개발자로서 계속 배우고 성장하면서 성공할 수 있는 기반을 마련하게 될 것입니다.

위 내용은 인턴 레벨: React에서 양식 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!