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

要访问值，您需要在列表元素中包括

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

Answer 4

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

会导致类似这样的结果

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

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

4 个答案: