如何使用 TypeScript 将拖动事件处理程序附加到 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：

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

还要注意将 text-indent 更改为 textIndent，因为您使用的是 react 而不是纯 html。请记住，在 react 中您主要使用虚拟 DOM，而不是真实的 DOM - 因此所有这些更改。

作为旁注，我建议您将事件处理程序保留在类内而不是类外。这样您就可以访问类实例的属性和方法。