时间戳

首页 > 解决方案 > 删除复选框时反应如何修复，列表中的下一个在不应该时出现选中

reactjs - 删除复选框时反应如何修复，列表中的下一个在不应该时出现选中

问题描述

我正在处理一个待办事项应用程序，当我选中一个框并将其删除时，列表中的下一个将标记为已完成。我不确定出了什么问题

尝试使用 splice 和 filter，起初我认为这是因为 splice 正在使用索引，但我切换到使用 filter 并且遇到了同样的问题。

```react

function ToDoList() {
  const [toDos, setToDos] = useState([
    {id: uuid(), toDo: "Workout", done: false},
    {id: uuid(), toDo: "Grocery shopping", done: false},
    {id: uuid(), toDo: "Cook dinner", done: false},
    {id: uuid(), toDo: "Walk dog", done: false},
    {id: uuid(), toDo: "Do laundry", done: false},
  ])
  // const removeToDo = index => {
  //   const newToDos = [...toDos];
  //   newToDos.splice(index, 1);
  //   setToDos(newToDos);
  // }

```switched to filter

const removeToDo = toDoId => {
    const newToDos = toDos.filter(toDo => toDo.id !== toDoId);
    setToDos(newToDos);
  }
  return (
    <StyledToDoList>
      <div className="ToDoContainer">
        <header className="ToDoHeader">To-Do List</header>
        <ToDoForm addToDo={addToDo} />
        <ul className="ToDoList">
          {toDos.map((toDo, index) => (
            <ToDo
              id={toDo.id}
              toDo={toDo}
              index={index}
              key={`${toDoInfo.id}${index}`}
              removeToDo={removeToDo}
            />
          ))}
        </ul>
        <RemoveChecked />
      </div>
    </StyledToDoList>
  )
}

function ToDo({ toDo, removeToDo }) {
  const [value, setValue] = useState(false)
  return (
    <StyledToDo>
      <li className="ToDoWrapper">
        <Checkbox
          id={toDo.id}
          isOn={value}
          handleToggle={() => setValue(!value)} 
        />
        <span className="ToDoItem">{toDo.toDo}</span>
        <button className="ToDoButton" type="button" onClick={() => removeToDo(toDo.id)}>
          &times;
        </button>
      </li>
    </StyledToDo>  
  )
}

预计在删除选中的列表项后，下一个保持未选中状态，但它标记下一个已完成。

标签： reactjs

解决方案

不确定这是否会解决它，但尝试添加event作为第二个参数发送到removeToDo().

<button className="ToDoButton" type="button" onClick={(event) => removeToDo(toDo.id, event)}>

然后在removeToDo()添加两行（不要忘记event作为第二个参数传入）：

const removeToDo = (toDoId, event) => {
    event.preventDefault()
    event.stopPropagation()
    const newToDos = toDos.filter(toDo => toDo.id !== toDoId);
    setToDos(newToDos);
}

preventDefault()执行此特定操作时，停止浏览器的任何默认行为。

stopPropagation()阻止事件在事件链中冒泡。**

** event.stopPropagation 和 event.preventDefault 有什么区别？

推荐阅读