無法讀取的未定義的屬性「的getAttribute」 - reactjs

Question

我在react.js. 我得到這個錯誤初學者：

Cannot read property 'getAttribute' of undefined full error output in my browser chrome console:

Uncaught TypeError: Cannot read property 'getAttribute' of undefined at clickOnBlock (bundle.js:21172) at ActionLink (bundle.js:21232) at bundle.js:7557 at measureLifeCyclePerf (bundle.js:7327) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (bundle.js:7556) at ReactCompositeComponentWrapper._constructComponent (bundle.js:7531) at ReactCompositeComponentWrapper.mountComponent (bundle.js:7439) at Object.mountComponent (bundle.js:13856) at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622) at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)

我的代碼：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var x; 
var y; 
var z; 
var zz; 
var counter=0; 
function ActionLink() { 

    function clickOnBlock(d) { 
     if (counter<2){ 
      x = d.getAttribute("data-color"); 
      y = d.getAttribute("data-u"); 
      document.getElementById("d" + (y)).style.backgroundColor = x; 
      document.getElementById("lastClick").value = x; 

      if(counter==0) { 
       // Store 
       localStorage.setItem("keepLast", x); 
       // Retrieve 
       z= document.getElementById("result").innerHTML = localStorage.getItem("keepLast"); 
      } 

      if(counter==0) { 
       // Store 
       localStorage.setItem("id", y); 
       // Retrieve 
       zz= document.getElementById("resultId").innerHTML = localStorage.getItem("id"); 
      } 
      counter++; 

      if(counter==2){ 
       if(x==z && y!=zz){ 
        yes(); 
       }else{ 
        no(); 
       } 
      } 
     } 
    } 
    function no(){ 
     setTimeout(function() { 
      remove(); 
     }, 1000); 
    } 

    function remove(){ 
     document.getElementById("d" + (y)).style.backgroundColor =""; 
     document.getElementById("d" + (zz)).style.backgroundColor =""; 
     counter=0 

    } 

    function yes(){ 
     setTimeout(function() { 
      ok(); 
     }, 1000); 
    } 
    function ok() { 
     document.getElementById("d" + (y)).style.backgroundColor = ""; 
     document.getElementById("d" + (zz)).style.backgroundColor = ""; 
     document.getElementById("d" + (y)).style.backgroundColor = "black"; 
     document.getElementById("d" + (zz)).style.backgroundColor = "black"; 
     counter=0 
    } 


    return (
     <div> 
      <div id="bigdiv"> 
       <a id="d1" type="button" data-u="1" data-color="green" onClick={clickOnBlock(this)}></a> 
       <a id="d2" type="button" data-u="2" data-color="yellow" onClick={clickOnBlock(this)}></a> 
       <a id="d3" type="button" data-u="3" data-color="deeppink" onClick={clickOnBlock(this)}></a> 
       <a id="d4" type="button" data-u="4" data-color="green" onClick={clickOnBlock(this)}></a> 
       <br/> 
       <a id="d5" type="button" data-u="5" data-color="blue" onClick={clickOnBlock(this)}></a> 
       <a id="d6" type="button" data-u="6" data-color="orange" onClick={clickOnBlock(this)}></a> 
       <a id="d7" type="button" data-u="7" data-color="deeppink" onClick={clickOnBlock(this)}></a> 
       <a id="d8" type="button" data-u="8" data-color="red" onClick={clickOnBlock(this)}></a> 
       <br/> 
       <a id="d9" type="button" data-u="9" data-color="red" onClick={clickOnBlock(this)}></a> 
       <a id="d10" type="button" data-u="10" data-color="yellow" onClick={clickOnBlock(this)}></a> 
       <a id="d11" type="button" data-u="11" data-color="orange"onClick={clickOnBlock(this)}></a> 
       <a id="d12" type="button" data-u="12" data-color="blue" onClick={clickOnBlock(this)}></a> 
      </div> 
      <input id="lastClick" type="hidden" value="" /> 
       <div id="result" className="dd" ></div> 
       <div id="resultId" className="dd" ></div> 
     </div> 

    ); 
} 

ReactDOM.render(<ActionLink /> , document.getElementById('app')); 

Answer 1

將事件傳遞到您的功能並獲得屬性e.target：

<a id="d1" type="button" data-u="1" data-color="green" onClick={(e) => clickOnBlock(e)}></a> 

function clickOnBlock(e) { 
    console.log(e.target.getAttribute("data-color")); 
} 

注：

onClick={clickOnBlock(param)} 

此功能將與每一個渲染執行，無需點擊。你需要傳遞一個函數onClick，但是你傳遞了這個函數的執行結果。爲了避免這種情況，請使用箭頭功能：

onClick={() => clickOnBlock(param)} 

Answer 2

當傳遞的事件處理程序你不不需要調用處理程序或將this作爲目標。
嘗試改變您從該通過該處理程序的方式：

`onClick={clickOnBlock(this)}` 

向該：

onClick={clickOnBlock} 

Answer 3

function clickOnBlock() { 
    return (d) => { if (counter<2){ 
     x = d.getAttribute("data-color"); 
     y = d.getAttribute("data-u"); 
     document.getElementById("d" + (y)).style.backgroundColor = x; 
     document.getElementById("lastClick").value = x; 

     if(counter==0) { 
      // Store 
      localStorage.setItem("keepLast", x); 
      // Retrieve 
      z= document.getElementById("result").innerHTML = localStorage.getItem("keepLast"); 
     } 

     if(counter==0) { 
      // Store 
      localStorage.setItem("id", y); 
      // Retrieve 
      zz= document.getElementById("resultId").innerHTML = localStorage.getItem("id"); 
     } 
     counter++; 

     if(counter==2){ 
      if(x==z && y!=zz){ 
       yes(); 
      }else{ 
       no(); 
      } 
     } 
    } 
}} 

的onClick = {（）=> this.clickOnBlock（）}