要实现React拖放而不使用外部库,可以按照以下步骤进行:
state中,添加一个dragging属性,用于跟踪元素是否正在被拖动。import React, { useState } from 'react';
const DragDropComponent = () => {
  const [dragging, setDragging] = useState(false);
  const handleDragStart = () => {
    setDragging(true);
  };
  const handleDragEnd = () => {
    setDragging(false);
  };
  return (
    
      Drag me!
    
  );
};
export default DragDropComponent;
state中,添加一个dropped属性,用于跟踪元素是否已经被放置。import React, { useState } from 'react';
const DropContainer = () => {
  const [dropped, setDropped] = useState(false);
  const handleDragOver = (event) => {
    event.preventDefault();
  };
  const handleDrop = () => {
    setDropped(true);
  };
  return (
    
      {dropped ? 'Element dropped!' : 'Drop here'}
    
  );
};
export default DropContainer;
import React from 'react';
import DragDropComponent from './DragDropComponent';
import DropContainer from './DropContainer';
const App = () => {
  return (
    
       
       
    
  );
};
export default App;
这样,你就可以实现一个简单的React拖放功能,而不使用任何外部库。