在这种情况下，我只想选中一个复选框，即如果选中一个框，则所有其他复选框都将被取消选中。那么它将如何与反应还原作用和还原一起工作
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} />
}}
CodeSandbox演示。
简单的map和改变data的状态就可以了。
注意：在这里，我使用了简单的input作为复选框。您可以使用您的组件。
来源：
import { useState } from "react";
import "./styles.css";
export default function App() {
const defaultData = [
{ 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 }
];
const [data, setData] = useState(defaultData);
function handleChange(e) {
const value = e.target.value;
const modifiedData = [...data];
modifiedData.map((item) => {
item.isChecked = item.id === +value;
return item;
});
setData(modifiedData);
}
return (
<div className="App">
{data.map((item, index) => (
<div key={item.id}>
<input
type="Checkbox"
value={item.id}
onChange={(e) => handleChange(e)}
checked={item.isChecked}
/>
{item.name}
<br />
</div>
))}
</div>
);
}
通常，如果只希望选择一个项目，则不希望在每个项目上都有isChecked属性，因为存在太多错误空间。相反，您需要一个单独的属性来存储当前选中的id。如果使用Redux或本地组件状态，则情况也是如此。
您的问题中没有太多信息，但您可以通过将id作为payload来调度toggleChecked操作来处理Redux中的大部分逻辑。
以下是使用Redux Toolkit设置减速器的示例。
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;
现在，您的组件变得非常简单。我们从Redux状态中选择选项和当前selectedId。我们通过比较其id和selectedId来查看是否选择了每个item。我们通过用这个id调度toggleChecked操作来处理每个复选框的更改。
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;
代码沙盒演示
import { useState } from "react";
import "./styles.css";
export default function App() {
/* declare a state containing all of checkbox's data */
const [data, setData] = useState([
{ id: 1, name: "apple", isChecked: false },
{ id: 2, name: "banana", isChecked: false },
{ id: 3, name: "mango", isChecked: false },
{ id: 4, name: "grape", isChecked: true },
{ id: 5, name: "carrot", isChecked: false }
]);
const handleChecked = (e) => {
console.log(e.target.name);
const res = data.map((d) => {
if (d.id.toString() === e.target.name)
return { ...d, isChecked: !d.isChecked };
return d;
});
setData(res);
};
return (
<>
{data.map((d) => (
<input
type="checkbox"
checked={d.isChecked}
// name is `d.id` so that we can know which checkbox to change via `e.target.name` in the handler function
name={d.id}
onChange={handleChecked}
key={d.id}
/>
))}
</>
);
}
这是一个代码沙盒链接到一个工作示例
否，需要在更新时使用map，只需过滤记录并更新即可。试试这个，希望它能起作用。
import React from "react";
import "./style.css";
class App extends React.Component {
state = {
data: [
{ id: 1, name: "apple", isChecked: true },
{ id: 2, name: "banana", isChecked: false },
{ id: 3, name: "mango", isChecked: false },
{ id: 4, name: "grape", isChecked: false },
{ id: 5, name: "carrot", isChecked: false }
]
};
// onChange event handler
handleChange = e => {
let arr = this.state.data.find(item => item.id == e.target.dataset.id);
arr.isChecked = !arr.isChecked;
this.setState({ ...this.state.date, arr });
};
render() {
return (
<div>
{this.state.data.map((item, index) => (
<input
type="checkbox"
data-id={item.id}
onChange={this.handleChange.bind(this)}
checked={item.isChecked}
/>
))}
</div>
);
}
}
export default App;
注意：在checkbox元素中传递data-id={item.id}。这将有助于在onchange处理程序事件中获取数据ide.target.dataset.id，通过这种方式可以过滤特定的记录并进行更新。