Question

我研究了所有可能类似的情况，并应用了它们的解决方案，但仍然无济于事。每次我单击X图标时，都会不断收到this.removeNum的非函数错误。有趣的是，每次我单击加号（未在此处显示）时，addNum函数都可以正常工作。唯一的区别是，我正在使用DOM为removeNum创建onClick属性。以下是我的代码：

constructor(props) {
    super(props);
    this.state = {
        phoneCnt: 1
    };
    this.addNum = this.addNum.bind(this);
    this.removeNum = this.removeNum.bind(this);
}

removeNum() {
    console.log("test");
    console.log(this.state.phoneCnt);
    this.state.phoneCnt--;
    this.id.remove();
}

addNum() {
    // let divRemWrap = document.createElement("div");

    let divWrap = document.createElement("div");
    divWrap.classList.add("input--spacing");
    divWrap.setAttribute("id", `phone${this.state.phoneCnt}`);
    this.state.phoneCnt++;

    let numSpan = document.createElement("label");
    numSpan.classList.add("hover--highlight");
    let inputNum = document.createElement("input");
    inputNum.classList.add("input--borders");
    inputNum.setAttribute("type", "text");
    inputNum.setAttribute("name", "telephone number");
    inputNum.setAttribute("maxlength", "11");
    inputNum.setAttribute("size", "11");
    let penIcon = document.createElement("i");
    penIcon.classList.add("fas", "fa-pencil-alt", "icon--space__schoolHeaderLeftForm", "icon-pencil-p--size__schoolHeaderLeftForm");
    numSpan.appendChild(inputNum);
    numSpan.appendChild(penIcon);

    let remBtn = document.createElement("button");
    remBtn.setAttribute("type", "button");
    remBtn.classList.add("btn-noStyle");
    remBtn.setAttribute("onClick", "this.removeNum()");
    let timesIcon = document.createElement("i");
    timesIcon.classList.add("fas", "fa-times", "icon-pencil-p--size__schoolHeaderLeftForm", "icon--space__schoolHeaderLeftForm")
    remBtn.appendChild(timesIcon);

    divWrap.appendChild(numSpan);
    divWrap.appendChild(remBtn);

    document.getElementById("addNum").appendChild(divWrap);
}

以下链接是我的错误https://gyazo.com/c8689d5fcf76a79d2924f9454ea18e62的简短gif。

this.removeNum不是HTMLButtonElement.onclick上的函数

0 个答案: