Используйте обработчик событий в компоненте React для тега TSX

Есть ли способ сделать обработчик событий, определенный в компоненте 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?


person Socrates    schedule 22.11.2018    source источник
comment
Я могу ошибаться, но просто включите onDoSomething в качестве еще одного члена в MyCompProps? onDoSomething: (Handler<DoSomethingEvent>) => void;   -  person miqh    schedule 23.11.2018
comment
@miqh Да, я подумал об этом, добавив что-то к MyCompProps, например onDoSomething: (Handler<PageChangedEvent>);. Но при запуске fireDoSomething на другой стороне ничего не происходит. Метод someMethod() не срабатывает. Добавление onDoSomething: (Handler<DoSomethingEvent>) => void; приводит к ошибке [ts] ";" expected. [1005]. Любая идея, как еще заставить это работать?   -  person Socrates    schedule 23.11.2018
comment
Ах, моя беда — это потому, что я забыл включить имя аргумента в член интерфейса функции. В том числе один должен получить вас. (handler: Handler<DoSomethingEvent>) => void;. Кроме того, заметил ваш другой комментарий ниже о том, как связан someMethod(). Я не думаю, что вам не следует использовать (), так как это преждевременно вызовет метод и привяжет результат метода, а не метод, к реквизиту.   -  person miqh    schedule 23.11.2018
comment
@miqh Хорошо, теперь он компилируется без ошибок при добавлении к MyCompProps файла onDoSomething: (handler: Handler<DoSomethingEvent>) => void;. На родительской стороне <MyComp param1="abc" param2="def" onDoSomething={this.someMethod} /> также компилируется, но метод someMethod никогда не запускается. Должен ли я подключать обработчик событий где-то в реквизите?   -  person Socrates    schedule 23.11.2018
comment
@miqh Хорошо, я запустил. Синтаксис немного отличается от ожидаемого. Добавлено onDoSomething: (someParamName: string) => void; в MyCompProps. Затем, чтобы вызвать это, я добавил this.props.onDoSomething("some message"); к методу fireDoSomething. Работает как шарм, когда все сделано правильно. Еще раз большое спасибо за вашу помощь!   -  person Socrates    schedule 23.11.2018


Ответы (1)


У вас могут возникнуть проблемы, поскольку в настоящее время вы не предоставляете функцию onDoSomething, а возвращаете результат:

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

должно быть

<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
person Cecil    schedule 22.11.2018
comment
Если я вас правильно понял, разница всего лишь в (), что не является проблемой в этом посте, поскольку это просто означает без параметров. Вопрос в том, как добиться обработки событий, аналогичной <button onClick={this.myMethod()}>Click me</button>. - person Socrates; 23.11.2018
comment
Обновил сообщение выше, избегая (). - person Socrates; 23.11.2018