时间戳

首页 > 解决方案 > 无法使用 Redux 调度切换复选框

reactjs - 无法使用 Redux 调度切换复选框

问题描述

我想签入我已完成的按钮，但通过将操作从我的 todoSlice.js 分派到我的 TodoItem.js。但是，当我单击复选框时，没有任何反应，控制台中没有错误，redux 控制台中也没有任何更新......请帮助我找出问题所在！太感谢了！

todoSlice.js：

import {
    createSlice
} from "@reduxjs/toolkit";

const todoSlice = createSlice({
    name: "todo",
    initialState: [{
        id: 1,
        title: "todo1",
        completed: false,
    }, {
        id: 2,
        title: "todo2",
        completed: false,
    }, {
        id: 3,
        title: "todo3",
        completed: true,
    }, ],
    reducers: {
        addTodo: (state, action) => {
            const newTodo = {
                id: Date.now(),
                title: action.payload.title,
                completed: false,
            };
            state.push(newTodo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex(
                (todo) => todo.id === action.payload.id
            )
            state[index].completed = action.payload.completed
        }
    },
});
export const {
    addTodo,
    toggleComplete,
} = todoSlice.actions;
export default todoSlice.reducer;

TodoItem.js：

import React from "react";
import { useDispatch } from "react-redux";
import { toggleComplete } from "../redux/todoSlice";

const TodoItem = ({ id, title, completed }) => {
  const dispatch = useDispatch();

  const handleCompleteClick = () => {
    console.log("helllo");
    dispatch(
      toggleComplete({
        id: id,
        completed: !completed,
      })
    );
  };
  return (
    <li className={`list-group-item ${completed && "list-group-item-success"}`}>
      <div className="d-flex justify-content-between">
        <span className="d-flex align-items-center">
          <input type="checkbox" className="mr-3" checked={completed} /> {title}{" "}
        </span>{" "}
        <button className="btn btn-danger"> Delete </button>{" "}
      </div>{" "}
    </li>
  );
};

export default TodoItem;

标签： reactjsactiondispatch

解决方案

尝试将 onClick 处理程序添加到按钮，如下所示：

<button className="btn btn-danger" onClick={handleCompleteClick}> Delete </button>{" "}

推荐阅读