提问者:小点点

利用React组件中的事件处理程序进行TSX标记


有没有办法让React组件中定义的事件处理程序在类似HTML的标记中可以访问?我的意思是:

<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />

我的目标是定义ondoSomething,但目前我只知道如何创建诸如param1param2之类的参数。

export interface MyCompProps {
    param1: string;
    param2: string;
}

export interface DoSomethingEvent {
    someParam: string;
}

export class MyComp extends React.Component<MyCompProps, {}> {
    private doSomethingDispatcher = new EventDispatcher<DoSomethingEvent>();

    public onDoSomething(handler: Handler<DoSomethingEvent>) {
        this.doSomethingDispatcher.register(handler);
    }

    private fireDoSomething(param: string) {
        this.doSomethingDispatcher.fire({someParam: param});
    }
}

如何使事件处理程序ondoSomething通过TSX访问,类似于使用onclick事件?


共1个答案

匿名用户

您可能会遇到问题,因为您当前没有向onDoSomething提供函数,但返回的结果是:

<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />

应该是

<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />