React.js에서 양식 작성: 초보자 가이드-JS 튜토리얼-php.cn

React.js에서 양식 작성: 초보자 가이드

WBOY

풀어 주다： 2024-08-18 07:00:45

원래의

264명이 탐색했습니다.

Building Forms in React.js : A beginners guide

양식은 웹 애플리케이션에 필수적이므로 사용자 상호 작용과 데이터 수집이 가능합니다. React.js에서 양식 작성에는 효율성과 유지 관리성을 보장하기 위해 상태 관리 및 구성 요소 중심 아키텍처를 사용하는 작업이 포함됩니다. 이 가이드에서는 React.js에서 양식을 작성하여 애플리케이션을 강력하고 사용자 친화적으로 만드는 모범 사례를 다룹니다.

1. 제어되는 구성 요소 사용

제어되는 구성 요소는 React에서 양식 입력을 처리하는 데 선호되는 방법입니다. 양식 데이터를 구성 요소 상태로 유지하므로 관리 및 유효성 검사가 더 쉬워집니다.

모든 양식 입력 값을 상태에 저장합니다. 객체를 생성하고 모든 입력을 상태의 속성과 매핑합니다. 아래 예

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

로그인 후 복사

2. 오류 처리

오류 처리 및 유효성 검사는 양식의 중요한 부분입니다. 사용자가 입력한 모든 값에 대해 오류가 있는지 확인하고 검증해야 하며 다음과 같은 경우를 모두 처리해야 합니다.

null/정의되지 않음 가져오기
빈 값 가져오기
잘못된 데이터 유형 등

사용자 경험을 향상하고 서버 부하를 줄여 결과적으로 성능을 향상시키려면 클라이언트측 검증을 구현해야 합니다. Yup과 같은 라이브러리 또는 사용자 정의 검증 로직을 활용하여 데이터 무결성을 보장하세요.

사용자 지정 유효성 검사 논리를 구현하는 방법을 살펴보겠습니다

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

로그인 후 복사

작업의 편의를 위해 Yup 패키지를 사용하여 양식 데이터의 유효성을 원활하게 확인해야 합니다. React-Hook-Form이나 Formik과 같은 Form Libraries와 함께 사용되는 매우 인기 있는 패키지입니다.
넵 문서: https://www.npmjs.com/package/yup

3. 타사 라이브러리 활용

Formik 및 React Hook Form과 같은 라이브러리는 양식 관리를 단순화하고 즉시 사용 가능한 강력한 기능을 제공하며 개발자가 보다 확장 가능하고 유연한 방식으로 양식을 쉽게 구축하고 검증할 수 있도록 해줍니다.

Formik 사용:

문서:- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

로그인 후 복사

실시간 Formik 데모를 확인하려면 클릭

결론

이러한 모범 사례를 따르면 React.js에서 양식을 작성하는 것이 간단하고 효율적일 수 있습니다. 상태 관리를 위해 제어된 구성 요소를 사용하고, 입력을 철저하게 검증하고, 타사 라이브러리를 활용하고, 적절한 스타일로 UX를 강화하고, 반응성이 뛰어나고 강력한 양식을 만들기 위해 성능을 최적화합니다.
이러한 지침을 준수하면 양식의 신뢰성, 사용자 친화적, 유지 관리 가능성을 보장하여 사용자와 개발자 모두에게 원활한 경험을 제공할 수 있습니다.

위 내용은 React.js에서 양식 작성: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!