Make use of event handler in React Component for TSX tag
0
Is there a way to make an event handler defined within a React Component accessible in an HTML-like tag? What I mean is something like:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
My goal is to define onDoSomething, but currently I only know how to create params such as param1 and 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});
}
}
How can I make the event handler onDoSomething accessible via TSX, similar to making use of the onClick event?
reactjs typescript event-handling tsx
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
add a comment |
0
Is there a way to make an event handler defined within a React Component accessible in an HTML-like tag? What I mean is something like:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
My goal is to define onDoSomething, but currently I only know how to create params such as param1 and 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});
}
}
How can I make the event handler onDoSomething accessible via TSX, similar to making use of the onClick event?
reactjs typescript event-handling tsx
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
1
I might be misunderstanding, but just simply includeonDoSomethingas another member inMyCompProps?onDoSomething: (Handler<DoSomethingEvent>) => void;
– miqh
Nov 22 '18 at 21:51
@miqh Yes, that's what I thought of, by adding something toMyCompPropssuch asonDoSomething: (Handler<PageChangedEvent>);. But when runningfireDoSomethingnothing happens on the other side. The methodsomeMethod()is not triggered. AddingonDoSomething: (Handler<DoSomethingEvent>) => void;results in an error[ts] ";" expected. [1005]. Any idea how else to get this running?
– Socrates
Nov 22 '18 at 22:07
1
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about howsomeMethod()is bound. I don't think you shouldn't be using()as this will prematurely invoke the method and bind the method result, not the method, to the prop.
– miqh
Nov 22 '18 at 22:23
@miqh Ok, it compiles now without errors when adding toMyCompPropstheonDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />also compiles, but the methodsomeMethodis never triggered. Do I have to connect the event handler somewhere in the props?
– Socrates
Nov 22 '18 at 22:38
@miqh Ok, I got it running. The syntax is a bit different than expected. AddedonDoSomething: (someParamName: string) => void;toMyCompProps. Then to trigger that I addedthis.props.onDoSomething("some message");to the methodfireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!
– Socrates
Nov 22 '18 at 23:01
add a comment |
0
0
0
Is there a way to make an event handler defined within a React Component accessible in an HTML-like tag? What I mean is something like:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
My goal is to define onDoSomething, but currently I only know how to create params such as param1 and 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});
}
}
How can I make the event handler onDoSomething accessible via TSX, similar to making use of the onClick event?
reactjs typescript event-handling tsx
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
Is there a way to make an event handler defined within a React Component accessible in an HTML-like tag? What I mean is something like:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
My goal is to define onDoSomething, but currently I only know how to create params such as param1 and 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});
}
}
How can I make the event handler onDoSomething accessible via TSX, similar to making use of the onClick event?
reactjs typescript event-handling tsx
reactjs typescript event-handling tsx
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
edited Nov 22 '18 at 22:38
Socrates
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
asked Nov 22 '18 at 19:44
SocratesSocrates
1,61472344
1,61472344
1
I might be misunderstanding, but just simply includeonDoSomethingas another member inMyCompProps?onDoSomething: (Handler<DoSomethingEvent>) => void;
– miqh
Nov 22 '18 at 21:51
@miqh Yes, that's what I thought of, by adding something toMyCompPropssuch asonDoSomething: (Handler<PageChangedEvent>);. But when runningfireDoSomethingnothing happens on the other side. The methodsomeMethod()is not triggered. AddingonDoSomething: (Handler<DoSomethingEvent>) => void;results in an error[ts] ";" expected. [1005]. Any idea how else to get this running?
– Socrates
Nov 22 '18 at 22:07
1
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about howsomeMethod()is bound. I don't think you shouldn't be using()as this will prematurely invoke the method and bind the method result, not the method, to the prop.
– miqh
Nov 22 '18 at 22:23
@miqh Ok, it compiles now without errors when adding toMyCompPropstheonDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />also compiles, but the methodsomeMethodis never triggered. Do I have to connect the event handler somewhere in the props?
– Socrates
Nov 22 '18 at 22:38
@miqh Ok, I got it running. The syntax is a bit different than expected. AddedonDoSomething: (someParamName: string) => void;toMyCompProps. Then to trigger that I addedthis.props.onDoSomething("some message");to the methodfireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!
– Socrates
Nov 22 '18 at 23:01
add a comment |
1
I might be misunderstanding, but just simply includeonDoSomethingas another member inMyCompProps?onDoSomething: (Handler<DoSomethingEvent>) => void;
– miqh
Nov 22 '18 at 21:51
@miqh Yes, that's what I thought of, by adding something toMyCompPropssuch asonDoSomething: (Handler<PageChangedEvent>);. But when runningfireDoSomethingnothing happens on the other side. The methodsomeMethod()is not triggered. AddingonDoSomething: (Handler<DoSomethingEvent>) => void;results in an error[ts] ";" expected. [1005]. Any idea how else to get this running?
– Socrates
Nov 22 '18 at 22:07
1
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about howsomeMethod()is bound. I don't think you shouldn't be using()as this will prematurely invoke the method and bind the method result, not the method, to the prop.
– miqh
Nov 22 '18 at 22:23
@miqh Ok, it compiles now without errors when adding toMyCompPropstheonDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />also compiles, but the methodsomeMethodis never triggered. Do I have to connect the event handler somewhere in the props?
– Socrates
Nov 22 '18 at 22:38
@miqh Ok, I got it running. The syntax is a bit different than expected. AddedonDoSomething: (someParamName: string) => void;toMyCompProps. Then to trigger that I addedthis.props.onDoSomething("some message");to the methodfireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!
– Socrates
Nov 22 '18 at 23:01
1
1
I might be misunderstanding, but just simply include
onDoSomething as another member in MyCompProps? onDoSomething: (Handler<DoSomethingEvent>) => void;– miqh
Nov 22 '18 at 21:51
I might be misunderstanding, but just simply include
onDoSomething as another member in MyCompProps? onDoSomething: (Handler<DoSomethingEvent>) => void;– miqh
Nov 22 '18 at 21:51
@miqh Yes, that's what I thought of, by adding something to
MyCompProps such as onDoSomething: (Handler<PageChangedEvent>);. But when running fireDoSomething nothing happens on the other side. The method someMethod() is not triggered. Adding onDoSomething: (Handler<DoSomethingEvent>) => void; results in an error [ts] ";" expected. [1005]. Any idea how else to get this running?– Socrates
Nov 22 '18 at 22:07
@miqh Yes, that's what I thought of, by adding something to
MyCompProps such as onDoSomething: (Handler<PageChangedEvent>);. But when running fireDoSomething nothing happens on the other side. The method someMethod() is not triggered. Adding onDoSomething: (Handler<DoSomethingEvent>) => void; results in an error [ts] ";" expected. [1005]. Any idea how else to get this running?– Socrates
Nov 22 '18 at 22:07
1
1
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.
(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about how someMethod() is bound. I don't think you shouldn't be using () as this will prematurely invoke the method and bind the method result, not the method, to the prop.– miqh
Nov 22 '18 at 22:23
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.
(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about how someMethod() is bound. I don't think you shouldn't be using () as this will prematurely invoke the method and bind the method result, not the method, to the prop.– miqh
Nov 22 '18 at 22:23
@miqh Ok, it compiles now without errors when adding to
MyCompProps the onDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the <MyComp param1="abc" param2="def" onDoSomething={this.someMethod} /> also compiles, but the method someMethod is never triggered. Do I have to connect the event handler somewhere in the props?– Socrates
Nov 22 '18 at 22:38
@miqh Ok, it compiles now without errors when adding to
MyCompProps the onDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the <MyComp param1="abc" param2="def" onDoSomething={this.someMethod} /> also compiles, but the method someMethod is never triggered. Do I have to connect the event handler somewhere in the props?– Socrates
Nov 22 '18 at 22:38
@miqh Ok, I got it running. The syntax is a bit different than expected. Added
onDoSomething: (someParamName: string) => void; to MyCompProps. Then to trigger that I added this.props.onDoSomething("some message"); to the method fireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!– Socrates
Nov 22 '18 at 23:01
@miqh Ok, I got it running. The syntax is a bit different than expected. Added
onDoSomething: (someParamName: string) => void; to MyCompProps. Then to trigger that I added this.props.onDoSomething("some message"); to the method fireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!– Socrates
Nov 22 '18 at 23:01
add a comment |
1 Answer
1
active
oldest
votes
1
You might be running into issues as you are not currently providing a function to onDoSomething, but the returned result:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />
should be
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
answered Nov 22 '18 at 21:53
CecilCecil
22625
If I understand you right, the difference is just(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to<button onClick={this.myMethod()}>Click me</button>.
– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding().
– Socrates
Nov 22 '18 at 22:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437245%2fmake-use-of-event-handler-in-react-component-for-tsx-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You might be running into issues as you are not currently providing a function to onDoSomething, but the returned result:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />
should be
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
answered Nov 22 '18 at 21:53
CecilCecil
22625
If I understand you right, the difference is just(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to<button onClick={this.myMethod()}>Click me</button>.
– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding().
– Socrates
Nov 22 '18 at 22:39
add a comment |
1
You might be running into issues as you are not currently providing a function to onDoSomething, but the returned result:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />
should be
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
answered Nov 22 '18 at 21:53
CecilCecil
22625
If I understand you right, the difference is just(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to<button onClick={this.myMethod()}>Click me</button>.
– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding().
– Socrates
Nov 22 '18 at 22:39
add a comment |
1
1
1
You might be running into issues as you are not currently providing a function to onDoSomething, but the returned result:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />
should be
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
answered Nov 22 '18 at 21:53
CecilCecil
22625
You might be running into issues as you are not currently providing a function to onDoSomething, but the returned result:
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod()} />
should be
<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />
answered Nov 22 '18 at 21:53
CecilCecil
22625
answered Nov 22 '18 at 21:53
CecilCecil
22625
answered Nov 22 '18 at 21:53
CecilCecil
22625
answered Nov 22 '18 at 21:53
CecilCecil
22625
22625
If I understand you right, the difference is just(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to<button onClick={this.myMethod()}>Click me</button>.
– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding().
– Socrates
Nov 22 '18 at 22:39
add a comment |
If I understand you right, the difference is just(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to<button onClick={this.myMethod()}>Click me</button>.
– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding().
– Socrates
Nov 22 '18 at 22:39
If I understand you right, the difference is just
(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to <button onClick={this.myMethod()}>Click me</button>.– Socrates
Nov 22 '18 at 21:57
If I understand you right, the difference is just
(), which is not the issue in this post as it just means no params. The question is how to achieve the event handling similar to <button onClick={this.myMethod()}>Click me</button>.– Socrates
Nov 22 '18 at 21:57
Updated the above post avoiding
().– Socrates
Nov 22 '18 at 22:39
Updated the above post avoiding
().– Socrates
Nov 22 '18 at 22:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437245%2fmake-use-of-event-handler-in-react-component-for-tsx-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I might be misunderstanding, but just simply include
onDoSomethingas another member inMyCompProps?onDoSomething: (Handler<DoSomethingEvent>) => void;– miqh
Nov 22 '18 at 21:51
@miqh Yes, that's what I thought of, by adding something to
MyCompPropssuch asonDoSomething: (Handler<PageChangedEvent>);. But when runningfireDoSomethingnothing happens on the other side. The methodsomeMethod()is not triggered. AddingonDoSomething: (Handler<DoSomethingEvent>) => void;results in an error[ts] ";" expected. [1005]. Any idea how else to get this running?– Socrates
Nov 22 '18 at 22:07
1
Ah, my bad—that's because I forgot to include the argument name inside the function interface member. Including one should get you by.
(handler: Handler<DoSomethingEvent>) => void;. Also, noticed your other comment below about howsomeMethod()is bound. I don't think you shouldn't be using()as this will prematurely invoke the method and bind the method result, not the method, to the prop.– miqh
Nov 22 '18 at 22:23
@miqh Ok, it compiles now without errors when adding to
MyCompPropstheonDoSomething: (handler: Handler<DoSomethingEvent>) => void;. On the parent side the<MyComp param1="abc" param2="def" onDoSomething={this.someMethod} />also compiles, but the methodsomeMethodis never triggered. Do I have to connect the event handler somewhere in the props?– Socrates
Nov 22 '18 at 22:38
@miqh Ok, I got it running. The syntax is a bit different than expected. Added
onDoSomething: (someParamName: string) => void;toMyCompProps. Then to trigger that I addedthis.props.onDoSomething("some message");to the methodfireDoSomething. Works like a charm when one does it right. Thanks again lot for your help!– Socrates
Nov 22 '18 at 23:01