ReactJS - 通过 OnClick 传递 ID答案

【问题标题】：ReactJS - Passing ID through OnClickReactJS - 通过 OnClick 传递 ID
【发布时间】：2018-10-06 01:28:27
【问题描述】：

我想将的 'ID' 和 'Value' 传递到函数中，并使用它来运行一段代码。我无法通过元素。我尝试了类似问题中提到的几种解决方案，但均未成功。

我最终将它们作为参数传递，一切正常。但我知道必须有办法更好地做到这一点，通过传递 ID 和值，而不必将其作为硬编码参数传递。

<button type="button" id="button1" name="testName" value="abc" onClick={()=>this.callFunction('button1', 'abc')}>Click Me !!</button>

callFunction(id,value) {
  console.log(id,value);
}

【问题讨论】：

onClick={(e)=>this.callFunction(e, 'button1', 'abc')} 并在函数中从 e.target.id 获取它

标签： reactjs arrow-functions

【解决方案1】：

您可以使用事件目标，e.target：

<button type="button" id="button1" name="testName" value="abc" onClick={this.callFunction}>Click Me !!</button>

callFunction(e) {
  console.log(e.target.id, e.target.value)
}

【讨论】：

谢谢！！虽然，我想要一个 ES6 中的解决方案，但事实证明这同样有效。

【解决方案2】：

如cmets中所述

使用事件获取 id。将事件传递给处理函数并通过 event.target.id 获取 id 值

<button type="button" id="button1" name="testName" value="abc" onClick={event => this.callFunction(event)}>Click Me !!</button>

callFunction = (event) => {
   console.log(event.target.id, event.target.value);
}

【讨论】：

【解决方案3】：

您可以使用event，查看handling events

<button type="button" id="button1" name="testName" value="abc" onClick={(event)=>this.callFunction(event)}>Click Me !!</button>

或

<button type="button" id="button1" name="testName" value="abc" onClick={this.callFunction}>Click Me !!</button>

在callFunction你可以调用read事件：

callFunction = (event) => {
  const id = event.target.id;
  const value = event.target.value;
}

【讨论】：

感谢您的快速回复。这就像一个魅力！