React useFormState: Hướng dẫn Toàn diện về Quản lý Trạng thái Form

Form là một phần cơ bản của hầu hết mọi ứng dụng web. Chúng cho phép người dùng tương tác với ứng dụng, gửi dữ liệu và thực hiện nhiều hành động khác nhau. Quản lý trạng thái form hiệu quả là rất quan trọng để xây dựng các form mạnh mẽ và thân thiện với người dùng. Hook useFormState của React cung cấp một giải pháp mạnh mẽ và thanh lịch để đơn giản hóa việc quản lý trạng thái form.

useFormState là gì?

useFormState là một hook của React giúp đơn giản hóa việc quản lý trạng thái form bằng cách cung cấp một nơi tập trung để lưu trữ và cập nhật giá trị form, theo dõi thay đổi đầu vào, xử lý xác thực và quản lý trạng thái gửi đi. Nó hợp lý hóa quy trình xây dựng các form phức tạp bằng cách giảm thiểu mã lặp lại và cải thiện khả năng đọc của mã.

So với các phương pháp truyền thống sử dụng useState cho mỗi trường của form, useFormState mang lại nhiều lợi ích:

• Trạng thái tập trung: Quản lý tất cả dữ liệu form trong một đối tượng trạng thái duy nhất, cải thiện tổ chức và giảm độ phức tạp.
• Cập nhật đơn giản: Cung cấp một cách tiện lợi để cập nhật nhiều trường form cùng một lúc.
• Xác thực tích hợp: Cung cấp hỗ trợ tích hợp sẵn cho việc xác thực form, cho phép bạn dễ dàng xác thực dữ liệu form và hiển thị thông báo lỗi.
• Xử lý gửi form: Cung cấp các cơ chế để quản lý trạng thái gửi form, chẳng hạn như theo dõi xem form có đang được gửi hay đã được gửi xong.
• Cải thiện khả năng đọc: Đơn giản hóa logic của form, giúp mã dễ hiểu và bảo trì hơn.

Cách sử dụng cơ bản

Hãy bắt đầu với một ví dụ cơ bản về cách sử dụng useFormState trong một form đơn giản với hai trường nhập liệu: tên và email.

Cài đặt

Đầu tiên, bạn cần cài đặt hook useFormState. Phương pháp cài đặt sẽ phụ thuộc vào thư viện hoặc framework bạn đang sử dụng cung cấp hook này (ví dụ: React Hook Form, Formik với một hook tùy chỉnh, hoặc một giải pháp tương tự). Ví dụ này sử dụng một thư viện giả định có tên là react-form-state (hãy thay thế bằng thư viện thực tế của bạn):

            npm install react-form-state

            

              
                Copy
              
            
          

Mã ví dụ

            import React from 'react';
import { useFormState } from 'react-form-state';

function MyForm() {
  const { values, errors, touched, handleChange, handleSubmit, isSubmitting } = useFormState({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: async (values) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(values));
    },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Name is required';
      }
      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
        errors.email = 'Invalid email format';
      }
      return errors;
    },
  });

  return (
    

      

        Name:
        
        {touched.name && errors.name && {errors.name}}
      
      

        Email:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Giải thích

• Nhập useFormState: Chúng ta nhập hook useFormState từ thư viện react-form-state.
• Khởi tạo Hook: Chúng ta gọi useFormState với một đối tượng tùy chọn. Đối tượng này bao gồm:
• initialValues: Một đối tượng xác định giá trị ban đầu của các trường trong form.
• onSubmit: Một hàm được gọi khi form được gửi. Nó nhận giá trị của form làm đối số. Trong ví dụ này, chúng ta mô phỏng một lệnh gọi API bằng setTimeout.
• validate: Một hàm xác thực giá trị của form. Nó nên trả về một đối tượng trong đó các khóa là tên trường và các giá trị là thông báo lỗi. Nếu một trường hợp lệ, nó không nên được bao gồm trong đối tượng trả về.
• Tách các giá trị (Destructure): Chúng ta tách giá trị trả về của useFormState để lấy các giá trị sau:
• values: Một đối tượng chứa giá trị hiện tại của các trường trong form.
• errors: Một đối tượng chứa bất kỳ lỗi xác thực nào.
• touched: Một đối tượng cho biết trường nào đã được "chạm" vào (tức là đã được focus và sau đó blur).
• handleChange: Một hàm cập nhật giá trị của form khi các trường nhập liệu thay đổi.
• handleSubmit: Một hàm xử lý việc gửi form.
• isSubmitting: Một giá trị boolean cho biết form có đang trong quá trình gửi hay không.
• Kết xuất Form: Chúng ta kết xuất form với các trường nhập liệu. Mỗi trường nhập liệu được kết nối với đối tượng values và hàm handleChange.
• Hiển thị lỗi: Chúng ta hiển thị thông báo lỗi cho mỗi trường nếu trường đó đã được "chạm" vào và có lỗi.
• Nút Gửi: Nút gửi sẽ bị vô hiệu hóa trong khi form đang được gửi đi.

Các tính năng nâng cao

useFormState cung cấp một loạt các tính năng nâng cao để xử lý các kịch bản form phức tạp hơn.

Xác thực tùy chỉnh

Hàm validate cho phép bạn triển khai logic xác thực tùy chỉnh. Bạn có thể thực hiện các kiểm tra xác thực phức tạp, chẳng hạn như xác thực với cơ sở dữ liệu hoặc sử dụng biểu thức chính quy. Ví dụ, xác thực số điện thoại dựa trên mã quốc gia:

            const validate = (values) => {
  const errors = {};
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number is required';
  } else {
    // Example: Validate US phone number format
    if (values.countryCode === 'US' && !/^\d{3}-\d{3}-\d{4}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid US phone number format (e.g., 123-456-7890)';
    }
    // Example: Validate UK phone number format
    if (values.countryCode === 'UK' && !/^\d{5} \d{6}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid UK phone number format (e.g., 01632 960001)';
    }
    // More country-specific validation can be added here
  }
  return errors;
};

            

              
                Copy
              
            
          

Xác thực bất đồng bộ

Đối với việc xác thực yêu cầu các hoạt động bất đồng bộ (ví dụ: kiểm tra xem tên người dùng có khả dụng hay không), bạn có thể sử dụng hàm validate bất đồng bộ.

            const validate = async (values) => {
  const errors = {};
  // Simulate an API call to check username availability
  const isUsernameAvailable = await checkUsernameAvailability(values.username);
  if (!isUsernameAvailable) {
    errors.username = 'Username is already taken';
  }
  return errors;
};

async function checkUsernameAvailability(username) {
  // Replace with your actual API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  // Simulate username taken
  return username !== 'taken_username';
}

            

              
                Copy
              
            
          

Form động

useFormState có thể được sử dụng để xây dựng các form động, nơi các trường của form được thêm hoặc xóa dựa trên tương tác của người dùng. Điều này đặc biệt hữu ích cho các form có số lượng trường nhập liệu thay đổi.

            import React, { useState } from 'react';
import { useFormState } from 'react-form-state';

function DynamicForm() {
  const [items, setItems] = useState(['item1']);

  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: items.reduce((acc, item) => {
      acc[item] = '';
      return acc;
    }, {}),
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addItem = () => {
    const newItem = `item${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    

      {items.map((item) => (
        

          {item}:
          
        
      ))}
      
        Add Item
      
      Submit
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

Xử lý các trường dạng mảng

Khi form của bạn bao gồm các trường dạng mảng (ví dụ: danh sách sở thích hoặc kỹ năng), useFormState có thể được điều chỉnh để quản lý các giá trị mảng này một cách hiệu quả. Dưới đây là một ví dụ:

            import React from 'react';
import { useFormState } from 'react-form-state';

function SkillsForm() {
  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: [''], // Start with one empty skill
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addSkill = () => {
    handleChange({ target: { name: 'skills', value: [...values.skills, ''] } });
  };

  const updateSkill = (index, value) => {
    const newSkills = [...values.skills];
    newSkills[index] = value;
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    

      Skills:
      {values.skills.map((skill, index) => (
        

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Add Skill
      
      Submit
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

Những lưu ý về khả năng truy cập

Khi xây dựng form, điều quan trọng là phải xem xét đến khả năng truy cập để đảm bảo rằng người dùng khuyết tật có thể sử dụng form một cách hiệu quả. Dưới đây là một số mẹo về khả năng truy cập:

• Sử dụng HTML ngữ nghĩa: Sử dụng các phần tử HTML phù hợp như <label>, <input>, <textarea>, và <button>.
• Cung cấp nhãn cho tất cả các trường form: Sử dụng phần tử <label> để liên kết nhãn với các trường form. Đảm bảo thuộc tính for của nhãn khớp với thuộc tính id của trường nhập liệu.
• Sử dụng thuộc tính ARIA: Sử dụng các thuộc tính ARIA để cung cấp thông tin bổ sung về các trường form cho các công nghệ hỗ trợ. Ví dụ, sử dụng aria-describedby để liên kết thông báo lỗi với các trường form.
• Cung cấp thông báo lỗi rõ ràng và ngắn gọn: Thông báo lỗi phải dễ hiểu và cung cấp hướng dẫn về cách sửa lỗi.
• Đảm bảo độ tương phản màu đủ: Sử dụng độ tương phản màu đủ giữa màu chữ và màu nền để form dễ đọc đối với người dùng có khiếm thị.
• Kiểm tra với các công nghệ hỗ trợ: Kiểm tra form với các công nghệ hỗ trợ như trình đọc màn hình để đảm bảo nó có thể truy cập được bởi người dùng khuyết tật.

Các phương pháp hay nhất

Dưới đây là một số phương pháp hay nhất khi sử dụng useFormState:

• Giữ cho hàm validate là hàm thuần túy: Hàm validate nên là một hàm thuần túy, nghĩa là nó không nên có bất kỳ tác dụng phụ nào và luôn trả về cùng một đầu ra cho cùng một đầu vào.
• Sử dụng memoization: Sử dụng memoization để tối ưu hóa hiệu suất của form. Memoization có thể giúp ngăn chặn các lần kết xuất lại không cần thiết của các thành phần form.
• Sử dụng quy ước đặt tên nhất quán: Sử dụng một quy ước đặt tên nhất quán cho các trường form và lỗi xác thực. Điều này sẽ giúp mã dễ đọc và bảo trì hơn.
• Viết unit test: Viết unit test để đảm bảo rằng form hoạt động chính xác. Unit test có thể giúp phát hiện lỗi sớm trong quá trình phát triển.
• Cân nhắc quốc tế hóa (i18n): Đối với các ứng dụng toàn cầu, hãy đảm bảo nhãn, thông báo và quy tắc xác thực của form hỗ trợ nhiều ngôn ngữ. Các thư viện như react-intl hoặc i18next có thể hỗ trợ việc này.

Ví dụ quốc tế

Khi làm việc với các form trên quy mô toàn cầu, điều quan trọng là phải xem xét đến quốc tế hóa và địa phương hóa. Dưới đây là một số ví dụ về cách xử lý các yêu cầu form quốc tế khác nhau:

• Số điện thoại: Các quốc gia khác nhau có định dạng số điện thoại khác nhau. Sử dụng một thư viện như libphonenumber-js để xác thực số điện thoại dựa trên mã quốc gia.
• Mã bưu chính: Mã bưu chính có sự khác biệt đáng kể giữa các quốc gia. Một số quốc gia sử dụng mã bưu chính số, trong khi những quốc gia khác sử dụng mã chữ và số. Triển khai logic xác thực hỗ trợ các định dạng mã bưu chính khác nhau.
• Định dạng ngày: Định dạng ngày thay đổi theo văn hóa. Một số quốc gia sử dụng định dạng MM/DD/YYYY, trong khi những quốc gia khác sử dụng định dạng DD/MM/YYYY. Sử dụng một thư viện như moment.js hoặc date-fns để định dạng và phân tích ngày tháng dựa trên ngôn ngữ của người dùng.
• Định dạng địa chỉ: Định dạng địa chỉ cũng khác nhau giữa các quốc gia. Một số quốc gia yêu cầu địa chỉ đường phố ở dòng đầu tiên, trong khi những quốc gia khác yêu cầu thành phố và mã bưu chính ở dòng đầu tiên. Sử dụng một thư viện hoặc API để định dạng địa chỉ dựa trên quốc gia của người dùng.
• Định dạng tiền tệ: Hiển thị giá trị tiền tệ theo định dạng phù hợp với ngôn ngữ của người dùng. Sử dụng API Intl.NumberFormat để định dạng giá trị tiền tệ.

Ví dụ, hãy xem xét một form đăng ký cần thu thập số điện thoại. Thay vì một trường "số điện thoại" duy nhất, có thể sẽ hữu ích hơn nếu có các trường riêng biệt cho "mã quốc gia" và "số điện thoại" kết hợp với một thư viện xác thực để thích ứng với định dạng địa phương cụ thể.

Các lựa chọn thay thế cho useFormState

Mặc dù useFormState cung cấp một giải pháp tiện lợi cho việc quản lý trạng thái form, có những thư viện và phương pháp phổ biến khác bạn có thể cân nhắc:

• Formik: Một thư viện được sử dụng rộng rãi cung cấp các tính năng quản lý form toàn diện, bao gồm quản lý trạng thái, xác thực và xử lý gửi form.
• React Hook Form: Một thư viện hiệu suất cao tận dụng hook useRef của React để giảm thiểu việc kết xuất lại và cải thiện hiệu suất form.
• Redux Form: Một thư viện tích hợp với Redux để quản lý trạng thái form. Đây là một lựa chọn tốt nếu bạn đã sử dụng Redux trong ứng dụng của mình.
• Hook tùy chỉnh: Bạn có thể tạo các hook tùy chỉnh của riêng mình để quản lý trạng thái form. Điều này mang lại sự linh hoạt cao nhất nhưng đòi hỏi nhiều công sức hơn.

Kết luận

Hook useFormState của React cung cấp một giải pháp mạnh mẽ và thanh lịch để đơn giản hóa việc quản lý trạng thái form. Bằng cách tập trung trạng thái, đơn giản hóa việc cập nhật, cung cấp xác thực tích hợp và quản lý trạng thái gửi, useFormState có thể cải thiện đáng kể trải nghiệm phát triển và chất lượng mã của các form React của bạn.

Cho dù bạn đang xây dựng các form đơn giản hay các form phức tạp với các trường động và yêu cầu quốc tế hóa, useFormState có thể giúp bạn xây dựng các form mạnh mẽ, dễ truy cập và thân thiện với người dùng một cách dễ dàng. Hãy xem xét các yêu cầu cụ thể của dự án và chọn phương pháp phù hợp nhất với nhu cầu của bạn. Hãy nhớ ưu tiên khả năng truy cập và quốc tế hóa để đảm bảo rằng các form của bạn có thể sử dụng được bởi tất cả mọi người, bất kể khả năng hay vị trí của họ.