选中一个复选框就是选中所有其他复选框答案

【问题标题】：Checking one checkbox is checking all other checkboxes选中一个复选框就是选中所有其他复选框
【发布时间】：2021-12-01 23:09:21
【问题描述】：

我有一个复选框组件，它的状态在 Redux Toolkit 中处理。检查一个复选框时，它会检查所有行中的所有其他复选框，但我只想检查我单击的复选框。下面是我的代码：

复选框组件：

export const Checkbox = (props) => {
    const dispatch = useDispatch()

    const handleCheckBox = () => {
        dispatch(checkboxState)
    }


    const isChecked = useSelector((state) => (
        state.isChecked
    ))


    return (
        <input type='checkbox' checked={isChecked} onChange={handleCheckBox}/>
    )
}

切片：

const rowState = {
    data: [],
    isChecked: false,
    loading: false
}


export const rowSlice = createSlice({
    name: 'rows',
    initialState: rowState,
    reducers: {
        CHECK_ROWS(state) {
            state.isChecked = !state.isChecked
        },
})

export const checkboxState = rowSlice.actions.CHECK_ROWS()

然后我在我的页面中调用复选框组件：

    const handleRows = (rowData) => {
        return (
            <tr>
                <td>
                    <Checkbox />
                </td>
//rest of the code
            </tr>

   return(
            <Table>
                {
                    dataSource.map((data) => (
                        handleRows(data)
                    ))
                }
            </Table>
)

【问题讨论】：

标签： reactjs redux checkbox redux-toolkit

【解决方案1】：

发生这种情况是因为您为整个组件保留了一个变量isChecked。要使其对每个数据都是唯一的，请将其保存为数组：

const rowState = {
    data: [],
    checkedData: [],
    loading: false
}

然后，您应该相应地更新checkedData 数组。检查状态将收到一个 id 或一个索引，如果它存在于 checkecData 中，则从 checkedData 中删除，如果不存在，则添加到 checkedData。

一个例子：

checkedData.includes(index) ? checkedData.filter((d,i) => i !== index) : [...checkedData, index]

【讨论】：

谢谢，但是我应该在切片中做什么而不是我所做的？或者我如何在切片中执行此操作？我是 redux 的新手，所以我也希望能得到一些帮助
其实我没用过redux-toolkit。逻辑就像我说的，如果存在则删除，如果不存在则添加。但不幸的是无法帮助实施。
但是关于这个例子，你的意思是我应该更新我的状态，对吧？如果是这样，我可以将其传递给操作
是的，您应该将索引传递给将更新状态的操作，并且您可以像我在示例中提供的那样更新数组

【解决方案2】：

每个复选框都应该需要一个索引，并且状态应该跟踪哪个复选框被选中。

import { useSelector, Provider, useDispatch } from "react-redux";
import { createAction, createReducer, configureStore } from "@reduxjs/toolkit";

const initialState = { checkboxes: [false, false, false] };

const index = createAction("toggle/index");
const toggleReducer = createReducer(initialState, (builder) => {
  builder.addCase(index, (state, action) => {
    state.checkboxes[action.payload] = !state.checkboxes[action.payload];
  });
});

const store = configureStore({ reducer: toggleReducer });

const toggleIndex = (index) => {
  return {
    type: "toggle/index",
    payload: index,
  };
};

export const Checkbox = ({ index }) => {
  const dispatch = useDispatch();

  const handleCheckBox = () => {
    dispatch(toggleIndex(index));
  };

  const isChecked = useSelector(({ checkboxes }) => checkboxes[index]);

  return (
    <input type="checkbox" checked={isChecked} onChange={handleCheckBox} />
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <Checkbox index={0} />
        <Checkbox index={1} />
        <Checkbox index={2} />
      </div>
    </Provider>
  );
};

export default App;

【讨论】：