Question

99

How to attach drag event handlers to a React component using TypeScript

rated 0 times [ 104] [ 5] / answers: 1 / hits: 20462 / 7 Years ago, tue, september 5, 2017, 12:00:00

I'm making my first foray into React (15.6.1) with TypeScript (2.4.2), and I'm trying to create a component that represents a JSON field which is draggable. Here is my component code:

import * as React from react;



interface JsonFieldProps {

    name: string;

    type: string;

    indent: number;

}



export class JsonField extends React.Component<JsonFieldProps, undefined> {

    marginStyle = {

        'text-indent': `${this.props.indent * 15}px`

    };



    render() {

        return <div draggable={true} onDragStart={handleDrag} style={this.marginStyle}>{this.props.name}: {this.props.type},</div>;

    }

}



function handleDrag(ev: DragEvent): void {

    let id = (ev.target as HTMLDivElement).id;

    ev.dataTransfer.setData(text/plain, id);

}

When I try to compile it (using webpack), I get the following error:

ERROR in [at-loader] ./src/components/JsonField.tsx:15:21 

  TS2322: Type '{ draggable: true; onDragStart: (ev: DragEvent) => void;

    style: { 'text-indent': string; }; child...' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

  Type '{ draggable: true; onDragStart: (ev: DragEvent) => void; style: { 'text-indent': string; }; child...' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.

    Types of property 'onDragStart' are incompatible.

      Type '(ev: DragEvent) => void' is not assignable to type 'EventHandler<DragEvent<HTMLDivElement>>'.

        Types of parameters 'ev' and 'event' are incompatible.

          Type 'DragEvent<HTMLDivElement>' is not assignable to type 'DragEvent'.

            Property 'initDragEvent' is missing in type 'DragEvent<HTMLDivElement>'.

I'm not sure if I'm using the wrong event type, but I can't seem to find any info about which one is correct if it is wrong.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tomas

Add To Favorites

Follow

Total Points: 165

Total Questions: 111

Total Answers: 103

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

tomas questions

1 Restore scroll position when navigating with React Router 6

Thu, Jan 27, 22, 00:00, 2 Years ago

1 Chart.js remove gridline

Mon, May 10, 21, 00:00, 3 Years ago

1 Axios Error 401 (Unauthorized) Error when trying to fetch api

Thu, Mar 4, 21, 00:00, 3 Years ago

1 How do I wait for this animation to finish before moving on to the next one?

Mon, Feb 22, 21, 00:00, 3 Years ago

1 How to set html input tag width fit-content in css

Tue, Jan 5, 21, 00:00, 3 Years ago

View All

answered 7 Years ago kalaveronicab · Accepted Answer

You must use React.DragEvent interface instead of generic DOM DragEvent:

export class JsonField extends React.Component<JsonFieldProps, undefined>

{

    private marginStyle = {

        textIndent: `${this.props.indent * 15}px`

    };



    public render()

    {

        return (

            <div

                draggable={true}

                onDragStart={handleDrag}

                style={this.marginStyle}>

                {this.props.name}: {this.props.type}

            </div>);

    }

}



function handleDrag(ev: React.DragEvent<HTMLDivElement>): void

{

    const id = (ev.target as HTMLDivElement).id;

    ev.dataTransfer.setData("text/plain", id);

}

Note also change of text-indent to textIndent as you are using react and not pure html. Remember in react you are mainly working with virtual DOM, not real one - therefore all these changes.

As a side note I would recommend you to keep event handlers within class and not outside of it. This way you will be able to access class instance properties and methods.