javascript - 试图在onClick上添加一个列表项删除线，但它破坏了我的提交按钮

问题描述

我正在使用 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/

提前感谢您的帮助！

标签： javascriptreactjsreact-redux

问题在于indexOf没有在您的taskReducer. 我查看了您的示例并检查了控制台以获取以下信息：

我认为您的意思是在这里使用 Array.indexOf：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

javascript - 试图在onClick上添加一个列表项删除线，但它破坏了我的提交按钮

问题描述

解决方案

推荐阅读