reactjs - 如何在 onclick 事件中将 li 值传递给方法？使用反应打字稿

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(e: Event)
{
   global.console.log(e.target.value)
}

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

Answer 3

一种优雅的方式可以将值绑定到函数

结果是这样的

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 4

要访问值，您需要在列表元素中包含 value 属性

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