如何用React實(shí)現(xiàn)一個(gè)拖放的交互功能

要在React中實(shí)現(xiàn)拖放的交互功能，可以使用React DnD（React Drag and Drop）庫(kù)。以下是一個(gè)簡(jiǎn)單的示例代碼，演示如何在React中實(shí)現(xiàn)拖放功能。

首先，安裝React DnD庫(kù)：

npm install react-dnd
npm install react-dnd-html5-backend

然后，創(chuàng)建一個(gè)Draggable組件和一個(gè)Droppable組件：

// Draggable.js
import { useDrag } from 'react-dnd';

const Draggable = ({ id, children }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { id, type: 'box' },
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      {children}
    </div>
  );
};

export default Draggable;

// Droppable.js
import { useDrop } from 'react-dnd';

const Droppable = ({ onDrop, children }) => {
  const [, drop] = useDrop({
    accept: 'box',
    drop: onDrop,
  });

  return (
    <div ref={drop}>
      {children}
    </div>
  );
};

export default Droppable;

最后，在父組件中使用Draggable和Droppable組件來實(shí)現(xiàn)拖放功能：

import Draggable from './Draggable';
import Droppable from './Droppable';

const App = () => {
  const handleDrop = (item) => {
    console.log(item);
  };

  return (
    <div>
      <Droppable onDrop={handleDrop}>
        <Draggable id="1">Drag me!</Draggable>
      </Droppable>
    </div>
  );
};

export default App;

在上述示例中，使用useDrag和useDrop自定義鉤子來實(shí)現(xiàn)拖拽和放置功能。Draggable組件表示可拖拽的元素，Droppable組件表示可放置的區(qū)域。通過在Droppable組件中傳遞一個(gè)onDrop回調(diào)函數(shù)，可以在放置操作發(fā)生時(shí)獲取拖拽的數(shù)據(jù)。