javascript - react 错误 : (function) is not defined at HTMLButtonElement. onclick

Question

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

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

ReferenceError: removePerson() is not defined at 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;


            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();
    }

Answer 1

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

因此，当您编写 removeButton.onclick = this.removePerson(h); 时，首先会计算等式的右侧。

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

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