Styjun

Short story with a first person narrator in a future where racial conflict had exploded into an all out war

Why do many programmers abstain from using global variables?

Travel to USA with a stuffed puppet

Importance of electrolytic capacitor size

What is the most likely cause of short, quick, and useless reviews?

Typesetting a comma unless before a line break

How do you manage to study and have a balance in your life at the same time?

Is it possible to observe space debris with Binoculars?

Strange formulas that gave rise to Koszul duality

Given a specific computer system, is it possible to estimate the actual precise run time of a piece of Assembly code

To which airspace does the border of two adjacent airspaces belong to?

How does speed affect lift?

Is it rude to ask my opponent to resign an online game when they have a lost endgame?

What does "se jouer" mean here?

Why didn't Thatcher give Hong Kong to Taiwan?

'Hard work never hurt anyone' Why not 'hurts'?

Real-world issues with using an alias

Is it safe for a student to give negative feedback in student evaluations?

If I have an accident, should I file a claim with my car insurance company?

How can I let authenticated users rebuild caches?

The little bee buzzes around the flower garden

If p-value is exactly 1 (1.0000000), what are the confidence interval limits?

Why don't they build airplanes from 3D printer plastic?

One hour 10 min layover in Newark; International -> Domestic connection. Enough time to clear customs?

Property 'name' does not exist on type 'EventTarget' - React + TypeScript

How do you explicitly set a new property on `window` in TypeScript?Type definition in object literal in TypeScriptThe property 'value' does not exist on value of type 'HTMLElement'TypeScript Objects as Dictionary types as in C#Are strongly-typed functions as parameters possible in TypeScript?Ignore Typescript Errors “property does not exist on value of type”Typescript: Interfaces vs TypesProperty 'value' does not exist on type 'EventTarget'Property 'value' does not exist on type EventTarget in TypeScriptReactjs and Typescript - Property 'select' does not exist on type 'EventTarget'

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

this is my code:

<Button
 disabled=filter === 'Active'
 size='md'
 color='primary'
 name='Active' // complete = false
 onClick=this.handleFilterClick
>
 Active
</Button>

on my function handler i get error on the event:

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 // continue here
 const name = e.target;

it says:

Property 'name' does not exist on type 'EventTarget'.

I also tried:

(e: React.MouseEvent<HTMLInputElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>) 

what is the event type for button? in javascript, this works, it can accept name but i don't know why not typescript?

reactjs typescript react-tsx

share|improve this question

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

add a comment | 

0

this is my code:

<Button
 disabled=filter === 'Active'
 size='md'
 color='primary'
 name='Active' // complete = false
 onClick=this.handleFilterClick
>
 Active
</Button>

on my function handler i get error on the event:

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 // continue here
 const name = e.target;

it says:

Property 'name' does not exist on type 'EventTarget'.

I also tried:

(e: React.MouseEvent<HTMLInputElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>) 

what is the event type for button? in javascript, this works, it can accept name but i don't know why not typescript?

reactjs typescript react-tsx

share|improve this question

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

add a comment | 

this is my code:

<Button
 disabled=filter === 'Active'
 size='md'
 color='primary'
 name='Active' // complete = false
 onClick=this.handleFilterClick
>
 Active
</Button>

on my function handler i get error on the event:

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 // continue here
 const name = e.target;

it says:

Property 'name' does not exist on type 'EventTarget'.

I also tried:

(e: React.MouseEvent<HTMLInputElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>) 

what is the event type for button? in javascript, this works, it can accept name but i don't know why not typescript?

reactjs typescript react-tsx

share|improve this question

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

<Button
 disabled=filter === 'Active'
 size='md'
 color='primary'
 name='Active' // complete = false
 onClick=this.handleFilterClick
>
 Active
</Button>

handleFilterClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 // continue here
 const name = e.target;

Property 'name' does not exist on type 'EventTarget'.

(e: React.MouseEvent<HTMLInputElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>) 

share|improve this question

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

share|improve this question

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

edited Mar 28 at 3:39

Boy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

asked Mar 28 at 2:46

i am gpbaculioi am gpbaculio

1,02444 gold badges1616 silver badges3535 bronze badges

1 Answer
1

active

oldest

votes

1

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const name = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const name = event.target as HTMLButtonElement;

From the typings:

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

share|improve this answer

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agree with using currentTarget. You could also refine event.target rather than casting. if (e.target instanceof HTMLButtonElement) e.target.name;
  
  – TLadd
  Mar 28 at 3:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @TLadd true, that would be the better way
  
  – Boy With Silver Wings
  Mar 28 at 3:54
  

  
  
  
  

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55389447%2fproperty-name-does-not-exist-on-type-eventtarget-react-typescript%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const name = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const name = event.target as HTMLButtonElement;

From the typings:

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

share|improve this answer

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agree with using currentTarget. You could also refine event.target rather than casting. if (e.target instanceof HTMLButtonElement) e.target.name;
  
  – TLadd
  Mar 28 at 3:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @TLadd true, that would be the better way
  
  – Boy With Silver Wings
  Mar 28 at 3:54
  

  
  
  
  

add a comment | 

1

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const name = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const name = event.target as HTMLButtonElement;

From the typings:

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

share|improve this answer

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Agree with using currentTarget. You could also refine event.target rather than casting. if (e.target instanceof HTMLButtonElement) e.target.name;
  
  – TLadd
  Mar 28 at 3:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @TLadd true, that would be the better way
  
  – Boy With Silver Wings
  Mar 28 at 3:54
  

  
  
  
  

add a comment | 

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const name = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const name = event.target as HTMLButtonElement;

From the typings:

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

share|improve this answer

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

const name = event.currentTarget;

const name = event.target as HTMLButtonElement;

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

share|improve this answer

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges

answered Mar 28 at 3:36

Boy With Silver WingsBoy With Silver Wings

6,36822 gold badges1010 silver badges3939 bronze badges