Question

当我们仍然将Typescript 1.8.x与当时React的（Definitely Typed）类型描述文件结合使用时，我们使用'Event'类型在React组件属性中声明'generic'事件。然后，我们可以将该属性的值（正在和事件处理函数）附加到例如HtmlInputElement的'onChange'属性。

interface IIcoonProps {
    onClick?: Event;
}

interface IIcoonDetails {
    cssClass: string;
    standaardTooltip: string;
}

class Icoon extends React.Component<IIcoonProps, {}> {



public render(): JSX.Element {

    return (<span   className={klassenamen}
                    title={nieuweTooltip}
                    onClick={this.props.onClick} />);
    }
}

我们最近更新了TypeScript 2.2.2并更新了我们正在使用的类型定义。现在我们不能再使用通用的“事件”类型，因为它会导致像“类型'事件'不能分配给'EventHandler＆gt;'”这样的例外。

当然，当我将自定义组件的属性界面中的属性类型更改为“React.MouseEvent”时，问题就解决了。但是.....我不想让这个组件的父组件知道底层类型（在这个例子中是HtmlInputElement），因为它是我自己组件的属性中提到的事件。我只需要将事件传递给父组件，因为我希望父组件能够使用事件的'PreventDefault'之类的方法。我在IComponentProps界面中使用不同的属性和方法来发布文本输入的更改值。

以下代码有效，但不可取。

interface IIcoonProps {
    onClick?: React.EventHandler<React.MouseEvent<HTMLSpanElement>>;
}

interface IIcoonDetails {
    cssClass: string;
    standaardTooltip: string;
}

class Icoon extends React.Component<IIcoonProps, {}> {

public render(): JSX.Element {

    return (<span   className={klassenamen}
                    title={nieuweTooltip}
                    onClick={this.props.onClick} />);
    }
}

有没有人知道，当使用TypeScript和React时，可以像使用'Event'类型一样使用泛型类型，而不使用泛型（如MouseEvent）。

更新：添加了代码示例

Answer 1

您的代码对我来说似乎不错，但如果您不想具体说明目标元素的类型，那么您可以使用HTMLElement：

interface IIcoonProps {
    onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
}

这将适用于未来可能的更改（例如从HTMLSpanElement到HTMLDivElement）。

此外，您可以改为使用此签名：

interface IIcoonProps {
    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

修改

如果您希望使用非通用接口，则可以创建自己的接口，然后使用：

type MouseEvent = React.MouseEvent<HTMLElement>;

interface IIcoonProps {
    onClick?: (event: MouseEvent) => void;
}

如何在TypeScript v2.x

1 个答案:

修改