Giới thiệu

Trong bài viết này, chúng ta sẽ cùng nhau thực hiện một bài tập lập trình thú vị: xây dựng một component nhập số điện thoại trong React. Component này sẽ chỉ chấp nhận các ký tự số và tự động định dạng số điện thoại theo kiểu (123) 456-7890. Đây là một bài tập tuyệt vời để thực hành kỹ năng lập trình React của bạn.

Mục tiêu của bài tập

Component PhoneNumberInput cần thực hiện các chức năng sau:

1. Chỉ chấp nhận các ký tự số.
2. Tự động định dạng số điện thoại khi người dùng nhập.
3. Thêm dấu ngoặc đơn khi nhập ký tự thứ 4.
4. Thêm dấu gạch ngang trước ký tự thứ 7.

Cấu trúc project

Trước tiên, hãy xem qua mã khởi tạo cho component của chúng ta:

import React from 'react';
export function PhoneNumberInput() {
  // code của bạn ở đây
  return <input data-testid="phone-number-input" />;
}

Bước 1: Khởi tạo state

Chúng ta sẽ bắt đầu bằng cách khai báo một biến state để lưu trữ giá trị nhập vào từ người dùng. Sử dụng hook useState của React:

const [value, setValue] = useState("");

Bước 2: Xử lý sự kiện thay đổi

Tiếp theo, chúng ta cần tạo một hàm để xử lý các thay đổi từ trường nhập liệu. Trong hàm này, chúng ta sẽ áp dụng một regex để đảm bảo rằng chỉ các ký tự số được chấp nhận:

let digits = e.target.value.replace(/\D/g, "");

Lưu ý:

• Hàm này sẽ loại bỏ tất cả các ký tự không phải số, bao gồm cả khoảng trắng, chữ cái và ký hiệu.

Bước 3: Giới hạn số ký tự nhập vào

Chúng ta cần đảm bảo rằng người dùng không thể nhập quá 10 ký tự:

if (digits.length > 10) {
  digits = digits.slice(0, 10);
}

Bước 4: Định dạng số điện thoại

Cuối cùng, chúng ta sẽ tự động định dạng số điện thoại khi người dùng nhập:

let formatted = digits;
if (digits.length > 3 && digits.length <= 6) {
  formatted = `(${digits.slice(0, 3)})${digits.slice(3)}`;
} else if (digits.length > 6) {
  formatted = `(${digits.slice(0, 3)})${digits.slice(3, 6)}-${digits.slice(6)}`;
}

Mã hoàn chỉnh

Dưới đây là mã hoàn chỉnh cho component PhoneNumberInput:

import React, { useState } from 'react';
export function PhoneNumberInput() {
  const [value, setValue] = useState("");
  const handleChange = (e) => {
    let digits = e.target.value.replace(/\D/g, "");
    if (digits.length > 10) {
      digits = digits.slice(0, 10);
    }
    let formatted = digits;
    if (digits.length > 3 && digits.length <= 6) {
      formatted = `(${digits.slice(0, 3)})${digits.slice(3)}`;
    } else if (digits.length > 6) {
      formatted = `(${digits.slice(0, 3)})${digits.slice(3, 6)}-${digits.slice(6)}`;
    }
    setValue(formatted);
  };
  return <input value={value} onChange={handleChange} data-testid="phone-number-input" />;
}

Bước 5: Tích hợp vào ứng dụng

Để thử nghiệm component của chúng ta, hãy chắc chắn xuất component App như sau:

export function App() {
  return (
    <div>
      <PhoneNumberInput />
    </div>
  );
}

Các thực hành tốt nhất

• Kiểm tra giá trị đầu vào: Đảm bảo rằng giá trị đầu vào luôn được kiểm tra và xử lý đúng cách.
• Tối ưu hóa trải nghiệm người dùng: Cung cấp phản hồi trực quan cho người dùng khi họ nhập số.

Những cạm bẫy thường gặp

• Chấp nhận ký tự không hợp lệ: Đảm bảo regex được áp dụng chính xác để loại bỏ tất cả ký tự không phải số.
• Không giới hạn ký tự: Nếu không giới hạn số ký tự, người dùng có thể nhập nhiều hơn 10 ký tự.

Mẹo tối ưu hiệu suất

• Sử dụng memoization cho hàm xử lý để ngăn chặn việc tái tạo không cần thiết.
• Tối ưu hóa việc render lại component khi không có sự thay đổi trong state.

Kết luận

Bài viết này đã hướng dẫn bạn cách xây dựng component nhập số điện thoại trong React. Hãy thử nghiệm và tùy chỉnh component này theo nhu cầu của bạn. Đừng quên áp dụng các thực hành tốt nhất để đảm bảo rằng component của bạn hoạt động hiệu quả và thân thiện với người dùng.

Câu hỏi thường gặp

1. Component này có thể được sửa đổi như thế nào?
   Bạn có thể thêm tính năng kiểm tra định dạng và thông báo lỗi cho người dùng.
2. Có cách nào để mở rộng component này không?
   Bạn có thể thêm các trường nhập liệu khác hoặc kết hợp với một form lớn hơn.

Hãy bắt đầu xây dựng và kiểm nghiệm component của bạn ngay hôm nay!