Cửa sổ phương thức là một phần tử giao diện người dùng phổ biến trong các ứng dụng web. Chúng được sử dụng để hiển thị thông tin quan trọng, yêu cầu đầu vào của người dùng hoặc xác nhận một hành động. Mặc dù cửa sổ phương thức có thể hữu ích nhưng chúng cũng có thể khó quản lý, đặc biệt nếu bạn có nhiều phương thức trên trang của mình.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo một useModalhook trong React giúp đơn giản hóa việc tạo và quản lý các cửa sổ phương thức. Với móc nối này, bạn có thể dễ dàng mở và đóng các phương thức, truyền dữ liệu cho chúng và xử lý các tương tác của người dùng.

useModalTạo móc

Để tạo useModalhook, chúng ta sẽ sử dụng useStatehook từ React để quản lý trạng thái của modal. Móc useStatetrả về một mảng có hai mục: giá trị trạng thái hiện tại và một hàm để cập nhật giá trị trạng thái.

Đây là mã cho cái useModalmóc:

import { useState } from 'react';

function useModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  function openModal(content) {
    setModalContent(content);
    setIsModalOpen(true);
  }

  function closeModal() {
    setModalContent(null);
    setIsModalOpen(false);
  }

  return {
    isModalOpen,
    openModal,
    closeModal,
    modalContent,
  };
}

• isModalOpen: một boolean cho biết liệu phương thức hiện có đang mở hay không.
• openModal: một hàm lấy một contentđối số và đặt modalContenttrạng thái cho nó, cũng như đặt isModalOpenthành true.
• closeModal: hàm set modalContentto nullvà set isModalOpento false.
• modalContent: nội dung của modal.

Bây giờ chúng ta đã có useModalhook, chúng ta có thể sử dụng nó để tạo và quản lý các chế độ trong các thành phần React của chúng ta.

Đây là một thành phần ví dụ sử dụng useModalhook:

import { useState } from 'react';
import useModal from './useModal';

function App() {
  const [data, setData] = useState(null);
  const { isModalOpen, openModal, closeModal, modalContent } = useModal();

  function handleButtonClick() {
    setData('example data');
    openModal(<Modal onClose={closeModal} data={data} />);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Open Modal</button>
      {isModalOpen && modalContent}
    </div>
  );
}

function Modal({ onClose, data }) {
  function handleConfirm() {
    console.log('Confirmed with data:', data);
    onClose();
  }

  return (
    <div>
      <h2>Modal Content</h2>
      <p>Data: {data}</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={handleConfirm}>Confirm</button>
    </div>
  );
}

Thành phần `Modal nhận hai props: onClosevà data. onCloselà chức năng sẽ được gọi khi người dùng nhấn vào nút "Hủy" hoặc nút "Xác nhận". datalà dữ liệu đã được thiết lập trong handleButtonClickhàm.

Thành Modalphần hiển thị nội dung của cửa sổ phương thức, bao gồm dữ liệu được truyền vào dưới dạng chỗ dựa. Nó cũng bao gồm nút "Hủy" và nút "Xác nhận". Khi người dùng nhấp vào nút "Hủy", onClosechức năng này được gọi, chức năng này sẽ đóng cửa sổ phương thức. Khi người dùng nhấp vào nút "Xác nhận", handleConfirmchức năng này được gọi, ghi dữ liệu vào bảng điều khiển và sau đó gọi onCloseđể đóng cửa sổ phương thức.

Cuối cùng, trong Appthành phần, chúng tôi hiển thị nút mở phương thức khi được nhấp và hiển thị phương thức theo điều kiện bằng cách kiểm tra xem có isModalOpenđúng không và hiển thị modalContenttrong DOM.

Phần kết luận

Trong bài viết này, chúng tôi đã chỉ cho bạn cách tạo useModalhook trong React giúp đơn giản hóa việc tạo và quản lý cửa sổ phương thức. Với móc nối này, bạn có thể dễ dàng mở và đóng các phương thức, truyền dữ liệu cho chúng và xử lý các tương tác của người dùng.

Móc useModalcó thể được tùy chỉnh để phù hợp với nhu cầu cụ thể của bạn. Ví dụ: bạn có thể thêm nhiều biến trạng thái hơn để theo dõi các loại phương thức khác nhau hoặc thêm các chức năng bổ sung để xử lý các tương tác cụ thể của người dùng.

Bằng cách sử dụng useModalhook, bạn có thể làm cho mã React của mình gọn gàng và ngăn nắp hơn, đồng thời tránh sự phức tạp của việc quản lý các phương thức trực tiếp trong các thành phần của bạn. Chúng tôi hy vọng bài viết này hữu ích và bạn sẽ thấy hook useModalhữu ích trong các dự án React của mình.