触发onClick事件以动态创建表行

Question

我已经动态创建了表行，但是在单击按钮时无法触发删除事件。

我已经尝试创建一个事件，就像通常在javaScript和reactjs中完成的一样。按钮ae会显示，但不会触发事件。

这是我的“创建行”功能：

    onEnterData(e){
          e.preventDefault();

          var random = Math.random();
          var tempRandom = "";
          var tempOem = ""; 
          var tempProductcategoryid = ""; 
          var tempProductsubcategoryid = "";
          var tempModelno = "";
          var tempOemwarrantydatefrom = "";
          var tempOemwarrantydateto = "";
          var tempWarrantydatefrom = "";
          var tempWarrantydateto = "";
          var tempSerialno = ""

          var obj = {
            tempRandom: random.toString(),
            tempOem: this.state.oem, 
            tempProductcategoryid: this.state.productcategoryid, 
            tempProductsubcategoryid: this.state.productsubcategoryid,
            tempModelno: this.state.modelno,
            tempOemwarrantydatefrom: this.state.oemwarrantydatefrom,
            tempOemwarrantydateto: this.state.oemwarrantydateto,
            tempWarrantydatefrom: this.state.warrantydatefrom,
            tempWarrantydateto: this.state.warrantydateto,
            tempSerialno: this.state.serialno
          }

          listArray.push(obj);
          console.log(listArray)

          for (var i = 0; i< listArray.length; i++){
            const listMap = listArray.map((item) => {
              var tableData = "<tr><td>" + item.tempOem.toString() + 
              "</td><td>" + item.tempProductcategoryid.toString() + "</td><td>" + item.tempProductsubcategoryid.toString() + 
              "</td><td>" + item.tempModelno.toString() + "</td><td>" + item.tempOemwarrantydatefrom.toString() + 
              "</td><td>" + item.tempOemwarrantydateto.toString() + "</td><td>" + item.tempWarrantydatefrom.toString() + 
              "</td><td>" + item.tempWarrantydateto.toString() + "</td><td>" + item.tempSerialno.toString() + "</td><td>
    // Out here event is being called

<input type='button' value='delete' onClick={" + this.onDelete + "}/></td></tr>";

       return tableData
        })
        document.getElementById("tableProreg").innerHTML = listMap
        ; 
      }
      console.log(listMap);
    }

这是我的表格主体，我在其中加载行

<tbody id="tableProreg" className="text-center">
      </tbody>

如何触发删除事件。