在 React Component 中为 TSX 标签使用事件处理程序答案

【问题标题】：Make use of event handler in React Component for TSX tag在 React Component 中为 TSX 标签使用事件处理程序
【发布时间】：2019-04-25 12:12:37
【问题描述】：

有没有办法让 React 组件中定义的事件处理程序可以在类似 HTML 的标签中访问？我的意思是这样的：

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

我的目标是定义onDoSomething，但目前我只知道如何创建param1和param2等参数。

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 事件？

【问题讨论】：

我可能会误解，但只是简单地将onDoSomething 包含为MyCompProps 中的另一个成员？ onDoSomething: (Handler<DoSomethingEvent>) => void;
@miqh 是的，这就是我的想法，在MyCompProps 中添加一些内容，例如onDoSomething: (Handler<PageChangedEvent>);。但是当运行fireDoSomething 时，另一边没有任何反应。方法someMethod() 没有被触发。添加onDoSomething: (Handler<DoSomethingEvent>) => void; 会导致错误[ts] ";" expected. [1005]。知道如何让它运行吗？
啊，我的错——那是因为我忘记在函数接口成员中包含参数名称。包括一个应该让你通过。 (handler: Handler<DoSomethingEvent>) => void;。另外，请注意您在下面关于someMethod() 是如何绑定的其他评论。我认为您不应该使用()，因为这会过早地调用方法并将方法结果而不是方法绑定到道具。
@miqh 好的，当添加到MyCompProps 和onDoSomething: (handler: Handler<DoSomethingEvent>) => void; 时，它现在可以正确编译了。在父端，<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} /> 也可以编译，但永远不会触发方法 someMethod。我是否必须在道具中的某处连接事件处理程序？
@miqh 好的，我让它运行起来了。语法与预期的有点不同。将onDoSomething: (someParamName: string) => void; 添加到MyCompProps。然后触发我将this.props.onDoSomething("some message"); 添加到方法fireDoSomething 中。当一个人做得对时，它就像一种魅力。再次感谢您的帮助！

标签： reactjs typescript event-handling tsx

【解决方案1】：

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

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

应该是

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

【讨论】：

如果我没听错的话，区别只是()，这不是这篇文章的问题，因为它只是意味着没有参数。问题是如何实现类似于<button onClick={this.myMethod()}>Click me</button>的事件处理。
更新了上面的帖子，避免()。