反应错误：（函数）未在 HTMLButtonElement.onclick 中定义

Question

我正在使用 ReactJS，我正在一个名为的方法中创建一个“删除”按钮，showData()并将其附加到人员表中的一行。

我设置其属性，onclick我的方法removePerson()在同一类中的方法来实现showData()。

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

ReferenceError: removePerson() 未在 HTMLButtonElement.onclick 中定义

这是我的代码：

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;

        }

    }

Answer 1

当您将变量设置为某个值时，首先计算该值。因此，当您写出removeButton.onclick = this.removePerson(h);等式的右侧时，首先对其进行评估。您可以使用粗箭头函数将其包装起来，以便在用户单击时调用的函数将是调用this.removePerson(h).&nbsp;这样它的值是一个 lambda 函数，而不是 的实际值this.removePerson(h)：removeButton.onclick&nbsp;=&nbsp;()&nbsp;=>&nbsp;this.removePerson(h);