reactjstypescript

Typescript - DragEvent: errors

Does anyone know why I have this kind of errors? I don't want to use the older approach with React.DragEvent.

"No overload matches this call."

 const handleDragOver = (e: DragEvent) => {
    e.preventDefault();
  };

 const dragOver = (e: DragEvent) => {
    e.preventDefault();
  };

<tr onDragOver={dragOver} 
    onDrop={(e) => handleDrop(e, item.id)}>

and the second error when the e is called: "Argument of type 'DragEvent' is not assignable to parameter of type 'DragEvent'. Type 'DragEvent' is missing the following properties from type 'DragEvent': layerX, layerY, offsetX, offsetY, and 16 more."

Solution

  • The DragEvent type you're using comes from the DOM API.In React, you should use React.DragEvent instead of DragEvent for event handlers like onDragOver:

    const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
 e.preventDefault();
};

<tr onDragOver={handleDragOver}></tr>