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

【问题标题】：How to pass li value to method in onclick event ? using react typescript如何在 onclick 事件中将 li 值传递给方法？使用反应打字稿
【发布时间】：2018-12-27 09:02:03
【问题描述】：

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

在处理程序中我必须使用哪个事件来获取目标值？

【问题讨论】：

获得value 而不是text 对我来说似乎无效。应该是event.target.innerText

标签： reactjs react-tsx

【解决方案1】：

它是React.ChangeEvent<HTMLInputElement>。

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

【讨论】：

我正在使用 onClick 事件。以上代码仅适用于 onChange 事件@RIYAJ KHAN。不过谢谢回复

【解决方案2】：

如果您询问事件类型，您可以使用事件类型：

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

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

【讨论】：

【解决方案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)
}

【讨论】：

在 typescript react 中，我们必须指定你传递的 type 元素。请给我 li 元素的类型。
@chidambaraselvan 你可以使用Event类型，我已经修改了代码

【解决方案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

【讨论】：