TypeEventを使用してReactコンポーネントにドラッグイベントハンドラを接続する方法

Question

私はTypeScript（2.4.2）でReact（15.6.1）に初めて参加しています.JSONを表すコンポーネントを作成しようとしていますフィールドはドラッグ可能です。ここに私のコンポーネントのコードは次のとおりです。

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); 
} 

私は（WebPACKのを使用して）、それをコンパイルしようとすると、私は次のエラーを取得する：

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>'. 

私は間違ったイベントを使用している場合、私はわからないんだけどタイプが間違っていればどちらの情報が正しいかはわかりません。

Answer 1

あなたはReact.DragEventインターフェースの代わりに、一般的なDOM DragEvent使用する必要があります：あなたは純粋なHTML反応していない使用しているとしても、textIndentへtext-indentの変更を

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); 
} 

注意を。反応では、主にバーチャルDOMで作業していることを忘れないでください。

イベントハンドラをクラス内に保持し、その外には置かないことをお勧めします。これにより、クラスインスタンスのプロパティとメソッドにアクセスできるようになります。