ReactJs中的怪异错误-onClick事件

Question

我想获得输入的值，但似乎有些错误，我无法弄清楚。

import React, { Component } from 'react';
...   
      this.state = {
      json:JSON.parse(props.data),
      objet: '',
      id: '',
      click: function(click){
        var a = document.getElementById("click").value;
        alert(a);
        a = null;
      }
    };
 ...
     {this.state.json[1].map(i => (
       ...
        <input onClick={this.state.click} value={i.id} id="click" ></input>
       ...
      ))}

在浏览器中我看到了：

问题是，当我单击两个输入之一时，它总是显示2。

我不明白为什么它不起作用，请帮助我，我被卡住了。

Answer 1

[您至少有两个具有相同ID（“点击”）的不同html元素。因此，document.getElementById("click")可能返回您不期望的元素。为了解决此问题，请尝试在id="click"上更改id={"click-" + i}并更新相应的onClick功能。