How to pass li value to method in onclick event ? using react typescript

Question

<ul>
    <li id="1" onClick={this.currentvalue}>2</li>
    <li id="2" onClick={this.currentvalue}>3</li>
    <li id="3" onClick={this.currentvalue}>4</li>
    <li id="4" onClick={this.currentvalue}>5</li>
</ul>

In onClick event, I have given a currentValue handler

public currentvalue(e:React."WHICH EVENT I HAVE TO USE HERE"<WHICH HTML 
ELEMENT?>)
{
   global.console.log(e.target.value)
}

In the handler which event I have to use to get the target value?

getting `value` instead of `text` seems invalid to me. should be `event.target.innerText` — Manoz, Jul 19 '18 at 09:44

RIYAJ KHAN · Answer 1 · 2018-07-19T13:27:47.517

0

Its s React.ChangeEvent<HTMLInputElement>.

public currentvalue(e: React.ClickEvent<HTMLInputElement>)
{
   global.console.log(e.target.value)
}

edited Jul 19 '18 at 13:27

answered Jul 19 '18 at 09:32

RIYAJ KHAN

15,032
5
31
53

i am using onClick event. above code work for onChange event only @RIYAJ KHAN. but thanks for reply – chidambara selvan Jul 19 '18 at 09:51

score 0 · Answer 2 · answered Jul 19 '18 at 09:33

0

If you asking about type of event, you can use Event type:

public currentvalue(e: Event)
{
   global.console.log(e.target.value)
}

https://developer.mozilla.org/en-US/docs/Web/API/Event

answered Jul 19 '18 at 09:33

Azamat Zorkanov

779
1
4
9

Harikrishnan · Answer 3 · 2018-07-19T09:57:55.560

0

For accessing the value you need to include value attribute in the list elements as

<ul>
<li id="1" value="2"onClick={this.currentvalue}>2</li>
<li id="2" value ="3" onClick={this.currentvalue}>3</li>
<li id="3"  value ="4" onClick={this.currentvalue}>4</li>
<li id="4"  value ="5" onClick={this.currentvalue}>5</li>
</ul>

The currentvalue method can be as

public currentvalue(e:Event)
{
   global.console.log(e.target.value)
}

edited Jul 19 '18 at 09:57

answered Jul 19 '18 at 09:48

Harikrishnan

1,097
8
13

In typescript react, we have to specify which type element you are passing. please give me type of li element. – chidambara selvan Jul 19 '18 at 09:53
@chidambaraselvan You can use Event type,I have modified the code – Harikrishnan Jul 19 '18 at 09:58

score 0 · Answer 4 · answered Jul 19 '18 at 10:18

An elegant way may to bind the value to the function

wich result in something like this

public currentvalue(value:Integer, e:Event)
{
    global.console.log(value)
}

and in your component

<ul>
    <li id="1" onClick={this.currentvalue.bind(null, 2)}>2</li>
    <li id="2" onClick={this.currentvalue.bind(null, 3)}>3</li>
    <li id="3" onClick={this.currentvalue.bind(null, 4)}>4</li>
    <li id="4" onClick={this.currentvalue.bind(null, 5)}>5</li>
</ul>

to get it clear hear an working example https://codesandbox.io/s/6jl292nww

score 0 · Answer 5 · answered Jun 14 '22 at 18:31

0

Try to use

public currentvalue(e:React.MouseEvent<HTMLLIElement>)
{
   global.console.log(e.target.value)
}

answered Jun 14 '22 at 18:31

Pat Kwok

1

How to pass li value to method in onclick event ? using react typescript

5 Answers5