Giới thiệu

Trong bài viết này, chúng ta sẽ khám phá một vấn đề thú vị khi sử dụng React Flow kết hợp với react-resizable-panels. Vấn đề này liên quan đến việc sự kiện double click không hoạt động đúng cách sau khi đóng một form điều kiện. Chúng ta sẽ tìm hiểu nguyên nhân gây ra vấn đề này và cách khắc phục nó.

Mô tả vấn đề

Khi phát triển một ứng dụng sử dụng React Flow và react-resizable-panels, bạn có thể chia panel thành hai phần:

Panel bên trái: Chứa đồ thị React Flow.
Panel bên phải: Chứa một form.

Hành vi của ứng dụng

Nhấp đơn vào một node → form sẽ mở trong panel bên phải.
Nhấp đôi vào một node → người dùng sẽ được điều hướng đến một flow khác.

Vấn đề gặp phải

Khi đóng form điều kiện (sau khi nó đã được mở bằng cách nhấp đơn), sự kiện double click trên node không hoạt động. Cụ thể:

Double click hoạt động tốt nếu không mở/đóng form.
Nhấp đơn và double click đều hoạt động riêng biệt.
Chỉ sau khi đóng form điều kiện, double click không được kích hoạt.

Tôi đã kiểm tra các hàm xử lý sự kiện và logic nhưng không tìm ra nguyên nhân.

Mã mẫu

Dưới đây là mã mẫu mà tôi đang cố gắng triển khai:

javascript Copy

import React, { useState } from "react";
import ReactFlow, { Background, Controls } from "reactflow";
import "reactflow/dist/style.css";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

const initialNodes = [
  {
    id: "1",
    position: { x: 100, y: 100 },
    data: { label: "Node 1" },
    type: "default",
  },
];

export default function App() {
  const [formOpen, setFormOpen] = useState(false);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleNodeClick = (_, node) => {
    setSelectedNode(node);
    setFormOpen(true); // mở form khi nhấp đơn
  };

  const handleNodeDoubleClick = (_, node) => {
    alert("Double click hoạt động! Điều hướng tới flow: " + node.id);
    // logic điều hướng ở đây...
  };

  return (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={70}>
        <ReactFlow
          nodes={initialNodes}
          onNodeClick={handleNodeClick}
          onNodeDoubleClick={handleNodeDoubleClick}
          fitView
        >
          <Background />
          <Controls />
        </ReactFlow>
      </Panel>

      <PanelResizeHandle />

      <Panel defaultSize={30}>
        {formOpen && (
          <div
            style={{
              border: "1px solid #ccc",
              padding: "10px",
              margin: "10px",
            }}
          >
            <h3>Form cho {selectedNode?.data?.label}</h3>
            <button onClick={() => setFormOpen(false)}>Đóng Form</button>
          </div>
        )}
      </Panel>
    </PanelGroup>
  );
}

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

Để đảm bảo rằng double click tiếp tục hoạt động sau khi form được mở và đóng, bạn có thể thực hiện một số phương pháp tốt nhất sau đây:

Kiểm tra sự kiện: Đảm bảo rằng các sự kiện được thiết lập đúng cách và không bị vô hiệu hóa khi đóng form.
Cập nhật trạng thái: Kiểm tra xem trạng thái của ứng dụng có được cập nhật chính xác sau khi đóng form hay không.
Sử dụng React.memo hoặc useCallback: Nếu bạn gặp phải vấn đề hiệu suất, hãy sử dụng React.memo hoặc sử dụng useCallback để tối ưu hóa các hàm xử lý.

Cách khắc phục sự cố

Để khắc phục vấn đề này, bạn có thể thử các bước sau:

Kiểm tra logic của hàm xử lý sự kiện: Đảm bảo rằng khi form được đóng, không có sự kiện nào bị ảnh hưởng.
Đặt lại trạng thái: Có thể cần phải đặt lại một số trạng thái liên quan đến node sau khi đóng form.
Thêm log để debug: Sử dụng console.log để theo dõi các sự kiện nhấp chuột và kiểm tra xem chúng có được kích hoạt hay không.

Mẹo hiệu suất

Tối ưu hóa component: Đảm bảo rằng các component không bị render lại không cần thiết.
Sử dụng React Profiler: Dùng React Profiler để xác định các bottleneck trong hiệu suất.

Các cạm bẫy thường gặp

Không xử lý đúng sự kiện: Một số lập trình viên có thể gặp khó khăn trong việc xử lý đúng các sự kiện nhấp chuột, dẫn đến việc sự kiện không được kích hoạt.
Quên cập nhật trạng thái: Khi đóng form, nếu không cập nhật chính xác trạng thái, có thể dẫn đến sự kiện không hoạt động.

Kết luận

Bài viết này đã giúp bạn hiểu rõ hơn về vấn đề double click trong React Flow khi kết hợp với react-resizable-panels. Hy vọng rằng những gợi ý và hướng dẫn trên sẽ giúp bạn khắc phục vấn đề này một cách hiệu quả. Nếu bạn đã từng gặp phải vấn đề tương tự, hãy chia sẻ kinh nghiệm của bạn trong phần bình luận bên dưới!

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

1. Làm thế nào để kiểm tra xem sự kiện double click có hoạt động không?
Bạn có thể thêm console.log trong hàm handleNodeDoubleClick để theo dõi.

2. Có cách nào để mở form mà không ảnh hưởng đến sự kiện double click không?
Có, bạn có thể sử dụng các trạng thái và logic để điều chỉnh cách mở form mà không làm gián đoạn các sự kiện nhấp chuột.

3. Làm thế nào để tối ưu hóa hiệu suất của ứng dụng?
Sử dụng React.memo, useCallback và kiểm tra các render lại không cần thiết để tối ưu hóa hiệu suất.

Giải quyết vấn đề double click trong React Flow với react-resizable-panels