reactjs - 如何在react redux中仅选择一个映射数据上的复选框

Question

在这种情况下，我只想选择一个复选框，如果一个复选框被选中，所有其他复选框都将被取消选中。那么它将如何与 react redux action 和 reducer 一起工作

data:[
{id:1, name:apple, isChecked:false},
{id:2, name:banana, isChecked:false}
{id:3 ,name:mango, isChecked:false},
{id:4, name:grape, isChecked:false},
{id:5, name:carrot, isChecked:false},
]


 {data.map((item,index) => {
     <Checkbox onChange={(e)=>handleChange(e)} checked={item.isChecked} />
 }}

标签： reactjsreduxreact-redux

Answer 1

一般来说，如果您只想选择一个项目，那么您不希望isChecked每个项目都有一个属性，因为有太多的错误空间。相反，您需要一个存储当前选中的id. 如果使用 Redux 或本地组件状态，这是正确的。

您的问题中没有太多信息，但是您可以通过使用as调度一个toggleChecked动作来处理 Redux 中的大部分逻辑。idpayload

下面是一个使用 Redux Toolkit 的 reducer 设置示例。

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

const initialState = {
  items: [
    { id: 1, name: "apple" },
    { id: 2, name: "banana" },
    { id: 3, name: "mango" },
    { id: 4, name: "grape" },
    { id: 5, name: "carrot" }
  ],
  selectedId: undefined
};

const slice = createSlice({
  name: "checkboxes",
  initialState,
  reducers: {
    // select this id and deselect all others
    // action.payload is the id
    selectId: (state, action) => {
      state.selectedId = action.payload;
    },
    // either select or deselect this id
    // action.payload is the id
    toggleChecked: (state, action) => {
      const isChecked = state.selectedId === action.payload;
      if (isChecked) {
        state.selectedId = undefined; // uncheck
      } else {
        state.selectedId = action.payload; // check
      }
    },
    // action.payload is an item with name and id properties
    addItem: (state, action) => {
      state.items.push(action.payload);
    }
    // can add other actions like remove, rename, etc.
  }
});

export const { selectId, toggleChecked, addItem } = slice.actions;

export default slice.reducer;

现在您的组件变得非常简单。selectedId我们从 Redux 状态中选择选项和当前。我们通过将其与 进行比较来查看是否每个都item被选中。我们通过使用 this调度操作来处理每个复选框的更改。idselectedIdtoggleCheckedid

import { toggleChecked } from "../store/slice";
import { useSelector, useDispatch } from "react-redux";
import { Checkbox } from "@material-ui/core";

const CheckboxSelect = () => {
  const dispatch = useDispatch();

  const { items, selectedId } = useSelector((state) => state.checkboxes);

  return (
    <div>
      {items.map(({ id, name }) => (
        <div key={id}>
          <Checkbox
            checked={id === selectedId}
            onChange={() => dispatch(toggleChecked(id))}
          />
          {name}
        </div>
      ))}
    </div>
  );
};

export default CheckboxSelect;

代码沙盒演示