javascript - react 错误:(功能)未在HTMLButtonElement.onclick上定义

我正在使用ReactJS，并在名为showData()的方法中创建一个“删除”按钮，并将其附加到人员表的一行中。
我将其属性onclick设置为与方法removePerson()相同的类中实现的方法showData()。

直到我单击“删除”按钮，这一切都很好-然后显示错误：


  ReferenceError：在HTMLButtonElement.onclick上未定义removePerson（）


这是我的代码：

showData() {

        let localStoragePersons = JSON.parse(localStorage.getItem("personsForms"));
        persons = localStoragePersons !== null ? localStoragePersons : [];


        let table = document.getElementById('editableTable');
        let x = table.rows.length;
        while (--x) {
            table.deleteRow(x);
        }
        let i = 0;
        for (i = 0; i < persons.length; i++) {
            let row = table.insertRow();
            let firstNameCell = row.insertCell(0);
            let lastNameCell = row.insertCell(1);
            let birthdayCell = row.insertCell(2);
            let salaryCell = row.insertCell(3);
            let choclatesCell = row.insertCell(4);
            let genderCell = row.insertCell(5);
            let workTypeCell = row.insertCell(6);
            let hobbiesCell = row.insertCell(7);
            let descriptionCell = row.insertCell(8);
            let colorCell = row.insertCell(9);


            firstNameCell.innerHTML = persons[i].firstName;
            lastNameCell.innerHTML = persons[i].lastName;
            birthdayCell.innerHTML = persons[i].birthday;
            salaryCell.innerHTML = persons[i].salary;
            choclatesCell.innerHTML = persons[i].Choclates;
            genderCell.innerHTML = persons[i].Gender;
            workTypeCell.innerHTML = persons[i].workType;
            hobbiesCell.innerHTML = persons[i].Hobbies;
            descriptionCell.innerHTML = persons[i].Description;
            colorCell.innerHTML = persons[i].favoriteColor;
            colorCell.style.backgroundColor = persons[i].favoriteColor;

            let h = persons[i].ID;


            let removeButton = document.createElement('button');
            removeButton.setAttribute('onclick', 'removePerson(' + h + ')')
            removeButton.innerHTML = 'Remove';
            row.appendChild(removeButton);
        }
    }

我试图更改代码

removeButton.setAttribute('onclick', 'removePerson(' + h + ')');

至

removeButton.onclick = this.removePerson(h);

但是每次“ showData（）”方法都运行此方法“ removePerson（）”也运行，我不希望这种情况发生。

    removePerson(ID) {
        alert(ID);
        let table = document.getElementById('editableTable');
        if (persons.length === 1) {
            table.deleteRow(1);
            persons.pop();
            localStorage.setItem("personsForms", JSON.stringify(persons));
        }

        let target;
        let i;
        for (i = 0; i < persons.length; i++) {
            if (persons[i].ID === ID) {
                target = persons[i].firstName;
                persons.splice(i, 1); break;
            }
        }

        for (i = 1; i < table.rows.length; ++i) {
            let x = table.rows[i];
            if (x.cells[0].innerHTML === target) {
                table.deleteRow(i); break;
            }
        }

        let temp = [];
        let j = 0;
        for (i = 0; i < persons.length; ++i) {
            if (persons[i] !== null) {
                temp[j++] = persons[i];
            }
        }
        persons = temp;
        localStorage.clear();
        localStorage.setItem("personsForms", JSON.stringify(persons));
        this.showData();
    }

最佳答案

将变量设置为某个值时，将首先计算该值。

因此，当您编写removeButton.onclick = this.removePerson(h);时，首先评估方程式的右侧。

您可以使用粗箭头函数包装它，以便用户单击时将调用的函数将是调用this.removePerson(h)的函数。这样，它的值是lambda函数，而不是this.removePerson(h)的实际值：

removeButton.onclick = () => this.removePerson(h);