Question

我是react.js.的初学者我收到了这个错误：

无法读取未定义的属性'getAttribute'   浏览器Chrome控制台中的完整错误输出：

未捕获的TypeError：无法读取未定义的属性“getAttribute”           在clickOnBlock（bundle.js：21172）           在ActionLink（bundle.js：21232）           在bundle.js：7557           at measureLifeCyclePerf（bundle.js：7327）           在ReactCompositeComponentWrapper._constructComponentWithoutOwner   （bundle.js：7556）           在ReactCompositeComponentWrapper._constructComponent（bundle.js：7531）           在ReactCompositeComponentWrapper.mountComponent（bundle.js：7439）           at Object.mountComponent（bundle.js：13856）           在ReactCompositeComponentWrapper.performInitialMount（bundle.js：7622）           在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>

或者只是传递任何东西，JS会为你做的：

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

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 = {（）=＆gt; this.clickOnBlock（）}

无法读取未定义的属性'getAttribute' - reactjs

3 个答案: