事件未觸發 static 標記在 reactJS

Question

我有一個簡單的待辦事項列表，其中每個任務都是通過單擊或輸入添加的

   <div className="taskControll">
      <input type='text' name="newTask" id="newTask" onKeyDown={(e)=>{keyCheck(e)}}/> 
      <input type='button' name="addTask" value='add' onClick = {addTask}  /> 
  </div>

‘addTask’向taskController div添加任務，function如下

function addTask(){

    let task = document.getElementById("newTask").value;
    document.getElementById("newTask").value = '';
    let taskViewer = document.getElementById("tasks");
    const data = renderToStaticMarkup
                                  (
                                  <div><span>{task}</span>                                        
                                    <input type='checkbox' name="doneTask" id = {task} value='done' onClick={(e)=>{strikeTask(e)}}/> 
                                  <br></br></div>);
    taskViewer.innerHTML += data;
  

}

我在每個復選框中添加一個 onclick function 'strikeTask'，以便在選中復選框時划掉每個任務

 function strikeTask(e){
     console.log(e);
     //do stuff
 }

問題是，雖然方法'keycheck'（在'enter'上調用addTask）和'addTask'都工作得很好我只是無法讓strikeTask方法觸發我已經嘗試了箭頭和匿名function

onClick={(e)=>{strikeTask(e)}}

但如果我這樣做

onClick={strikeTask(this)}

添加任務時，function 會自行觸發，即這被視為對 function 的調用，而不是對其的引用。 當我在瀏覽器中檢查事件時，我還可以看到該事件沒有被添加到復選框中，我懷疑這是因為我使用“renderToStaticMarkup”將任務添加到列表中。 如何讓事件僅在選中復選框時觸發？

Answer 1

復選框需要一個 onChange onChange={(e)=>{strikeTask(e)}}

Answer 2

我知道已經晚了，但我想通了，使用“innerHTML”清空目標 div，然后插入導致事件偵聽器被刪除的新元素。 我能夠使用“insertAdjacentHTML”解決這個問題，因為它可以保持事件監聽器的完整性。 無論如何感謝您的答復