我需要向此代码添加什么，才能使复选框即使在刷新页面后也保持选中状态？代码示例或解释将不胜感激这是该项目的完整代码：https://github.com/Orelso/Project-notes
如果您需要我添加代码的任何其他部分，请告诉我
import React from "react";
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import { FormControlLabel, FormGroup, IconButton, Typography } from "@mui/material";
import { DeleteOutlined } from "@mui/icons-material";
import { makeStyles } from "@mui/styles";
import Checkbox from '@mui/material/Checkbox';
import { createTheme, ThemeProvider } from "@mui/material";
import { blue } from "@mui/material/colors";
const theme = createTheme ({
palette: {
category: {
color: blue
}
}
})
const useStyles = makeStyles({
test: {
border: (note) => {
if (note.category == 'HTML/CSS') {
return '2px solid blue'
} else if (note.category == 'Javascript') {
return '2px solid green'
} else if (note.category == "Javascript/React") {
return '2px solid yellow'
}else if (note.category == 'MUI') {
return '2px solid red'
}
}
},
})
export default function NoteCard({ note, handleDelete }) {
const classes = useStyles(note)
return (
<div>
<Card elevation={10} className={classes.test}>
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={<span style={{fontFamily: "monospace", color: "#000000"}}>{note.title}</span>}
subheader={<span style={{fontFamily: "Courier New", color: "#000000"}}>{note.category}</span>} />
<CardContent>
<FormGroup>
<FormControlLabel sx={{color: '#000000'}} control={<Checkbox color="warning" />} label={note.details} />
<FormControlLabel sx={{color: '#555555'}} control={<Checkbox />} label={note.details2} />
<FormControlLabel sx={{color: '#000000'}} control={<Checkbox />} label={note.details3} />
<FormControlLabel sx={{color: '#555555'}} control={<Checkbox />} label={note.details4} />
</FormGroup>
</CardContent>
</Card>
</div>
)
}
您可以使用 redux persist 将数据保存在本地存储中，这是保存数据或从 Rest API 从后端获取数据的唯一方法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
