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

您至少有兩個不同的 html 元素具有相同的 id（“點擊”）。 由於那個document.getElementById("click")可能會返回您不期望的元素。 為了解決這個問題，請嘗試在id={"click-" + i}上更改id="click"並更新相應的 onClick function。