反应错误:(功能)未在HTMLButtonElement.onclick上定义

时间:2019-06-24 20:12:01

标签: javascript reactjs

我正在使用ReactJS,并在名为Private Sub Operator_Start_AfterUpdate() If Process_Worktype <> "Reconciliation" Then If Me.Process_Worktype.Value = "Administration NB" Then Me.Operator_Start.Value = dhRoundTime([Operator_Start], 5) Else Me.Operator_Start.Value = RoundTime([Operator_Start]) End If End If If (Operator_Start < Forms!frm_Job_Details.[In Time]) Then MsgBox "Error, Your Start Time cannot be before your Job In Time" Me.Operator_Start = Forms!frm_Job_Details.[In Time] Me.Comments.SetFocus Me.Operator_Start.SetFocus Exit Sub End If If (Operator_Start > Forms!frm_Job_Details.[Deadline]) Then MsgBox "Error, Your Start Time cannot be after your Job Deadline" Me.Operator_Start = Forms!frm_Job_Details.[Deadline] Me.Comments.SetFocus Me.Operator_Start.SetFocus Exit Sub End If If (Process_Worktype <> "Reconciliation" And Operator_Start > Operator_End) Or (Len(Nz(Process_Worktype, "")) = 0 And Operator_Start > Operator_End) Then MsgBox "Error, Your start time cannot be later than your deadline unless this is a Reconciliation" Me.Comments.SetFocus Me.Operator_Start.SetFocus End If If (Operator_Start = Operator_End) Then MsgBox "Alert! Your start time is the same as end time. No Time billed." Me.Comments.SetFocus Me.Operator_Start.SetFocus End If 'validation for overlap time 'If (Operator_Start > Operator_Start And Operator_Start < Operator_End) Then ' If DLookup("Operator_Start", "tbl_ActiveOperators", Me.Operator = "Operator") Then ' MsgBox "HI" ' Me.Operator_Start.SetFocus ' Cancel = True ' End If 'End If 'If (Operator_Start > Operator_Start And Operator_Start < Operator_End) Then ' DLookup("Operator_Start", "tbl_ActiveOperators", Me.Operator = "Operator") Then ' MsgBox "HI" ' Me.Operator_Start.SetFocus ' Cancel = True 'End If 'If DCount("*", "tbl_ActiveOperators", "Operator_Start < Forms!frm_Job_Details.[Operator_End] And Operator_End > Forms!frm_Job_Details.[Operator_Start] And Operator = Forms!frm_Job_Details.[Operator] ") > 0 Then ' MsgBox "Error: Times overlap" ' Me.Operator_Start.SetFocus ' Cancel = True 'End If If DCount("*", "[tbl_ActiveOperators]", "[Operator_Start] <= Forms!frm_Job_Details!Operator_End And [Operator_End] >= Forms!frm_Job_Details!Operator_Start And Not [Operator] Is Null ") > 0 Then MsgBox "Error: Times overlap" Me.Operator_Start.SetFocus Cancel = True End If End Sub 的方法中创建一个“删除”按钮,并将其附加到人员表的一行中。
我将其属性showData()设置为在方法onclick的同一类中实现的方法removePerson()

这一切都很好,直到我单击“删除”按钮-然后出现错误:

  

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

这是我的代码:

showData()

我试图更改代码

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 + ')');

但是每次“ showData()”方法运行此方法“ removePerson()”时也会运行,我不希望这种情况发生。

removeButton.onclick = this.removePerson(h);

1 个答案:

答案 0 :(得分:2)

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

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

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

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