Как передать значение li в метод в событии onclick? используя реагировать машинопись

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>

В событии onClick я дал обработчик currentValue

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

В обработчике, какое событие я должен использовать, чтобы получить целевое значение?

Answer 1

Его с React.ChangeEvent<HTMLInputElement>,

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

Answer 2

Элегантный способ привязать значение к функции

в результате чего-то вроде этого

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

и в вашем компоненте

<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>

чтобы понять это, послушайте рабочий пример https://codesandbox.io/s/6jl292nww

Answer 3

Для доступа к значению вам необходимо включить атрибут значения в элементы списка как

<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>

Метод currentvalue может быть как

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

Answer 4

Попробуй использовать

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

Answer 5

Если вы спрашиваете о типе события, вы можете использовать Тип события:

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

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