试图使列表项通过onClick删除，但它破坏了我的提交按钮

Question

我正在使用react和redux制作一个任务列表程序，并且编写了一个函数，当您单击项目并将其添加到第二个列表中但被删除时，将其从列表中删除。我试图使该函数在每个列表项上触发onClick，但是由于某种原因，当我向其中添加事件时，当我单击“提交”按钮以添加新任务时，页面上的所有内容都消失了。

我已经尝试过其他事件，例如onMouseDown，它们都引起了同样的事情。我尝试更改代码的各个部分，但似乎唯一的中断是添加onClick事件。

处理列表删除的功能在这里

const taskReducer = (state = [[],[]], action) => {

    switch(action.type) {

        case ADD: 

            return [state[0].concat(action.task), [...state[1]]];

        case COMP:

            let idx = indexOf(state[0].filter(action.task));

            let beg = state.slice(0, idx);

            let end = state.slice(idx + 1);

            let newState = [[...beg, ...end], [...state[1], action.task]];

            return newState;

        default: 

            return state;

    }

}

生成按钮和两个列表的部分在这里

<button 

   id = 'submitGoal'

   onClick = {this.submitHandler} >Submit</button>

<ul id = 'currentTasks'>

   {this.props.tasks.map( (task, idx) => {

        return (

             <li onClick = {this.completeHandler(event.target)} key={idx}>{task}</li>

             )

        })

   }

</ul>

<ul id = 'completedTasks'>

     {this.props.compTasks.map( (task, idx) => {

          return (

               <li key={idx}>{task}</li>

               )

          })

     }

</ul>

整个程序现在也可以在https://jeengland.github.io/molehills/上直播。