jeudi 13 janvier 2022

Problem with Material-UI multiple controlled checkboxes and useState

Introduction

Hello guys, in my react app project i have a component that displays a checklist where each item has a score, when a checkbox gets checked it's sums up with the others checkbox scores that were checked and the sum of those values is displayed at bottom on the snackbar.

Problem

The problem is that when a checkbox is checked others cant be checked and the total score values gets incorrect

Any help is appreciated!!!

Checklist Component

import React, { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import Typography from '@material-ui/core/Typography'
import Paper from '@material-ui/core/Paper'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import ListSubheader from '@material-ui/core/ListSubheader'
import FormGroup from '@material-ui/core/FormGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import Checkbox from '@material-ui/core/Checkbox'
import Snackbar from '@material-ui/core/Snackbar'
import Button from '@material-ui/core/Button'
import Icon from '@material-ui/core/Icon'
import SendIcon from '@material-ui/icons/Send'

const useStyles = makeStyles((theme) => ({
    text: {
        padding: theme.spacing(2, 2, 0),
    },
    paper: {
        paddingBottom: 50,
    },
    list: {
        marginBottom: theme.spacing(2),
    },
    subheader: {
        backgroundColor: theme.palette.background.paper,
    },
    appBar: {
        top: 'auto',
        bottom: 0,
    },
    snackbar: {
        [theme.breakpoints.down('xs')]: {
            bottom: 90,
        },
    },
}))

const submitButton = (
    <Button
        variant="contained"
        color="primary"
        endIcon={<Icon><SendIcon /></Icon>}
    >
        Send
    </Button>
)

const Checklist = () => {
    const classes = useStyles()
    const [state, setState] = useState({
        checked1A: false,
        checked1B: false,
        checked1C: false,
        checked2: false,
        checkValue: 0,
        totalValue: 0
    })

    const { checked1A, checked1B, checked1C, checked2, checkValue, totalValue } = state

    const handleChange = (newState) => (event) => {
        setState({ [event.target.name]: event.target.checked, checkValue: event.target.value, ...newState })
        console.log(event.target.name)
    }

    return (<React.Fragment>
        <CssBaseline />
        <Paper square className={classes.paper}>
            <Typography className={classes.text} variant="h5" gutterBottom>
                i-Nursing
            </Typography>
            <form>
                <FormGroup>
                    <List className={classes.list} >
                        <React.Fragment>
                            <ListSubheader>Atividades Básicas</ListSubheader>
                            <ListItem>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={checked1A}
                                            onChange={handleChange({ checkValue: 4.5, totalValue: !checked1A ? totalValue+4.5 : totalValue-4.5 })}
                                            name="checked1A"
                                            value={checkValue}
                                            color="primary"
                                        />
                                    }
                                    label=""
                                />
                                <ListItemText>Sinais vitais, cálculo e registro do balanço hídrico</ListItemText>
                            </ListItem>
                            <ListItem>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={checked1B}
                                            onChange={handleChange({ checkValue: 12.1, totalValue: !checked1B ? totalValue+12.1 : totalValue-12.1 })}
                                            name="checked1B"
                                            value={checkValue}
                                            color="primary"
                                        />
                                    }
                                    label=""
                                />
                                <ListItemText>Presença à beira do leito e observação contínua ou ativa por 2 horas ou mais em algum plantão por razões de segurança, gravidade ou terapia</ListItemText>
                            </ListItem>
                            <ListItem>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={checked1C}
                                            onChange={handleChange({ checkValue: 19.6, totalValue: !checked1C ? totalValue+19.6 : totalValue-19.6 })}
                                            name="checked1C"
                                            value={checkValue}
                                            color="primary"
                                        />
                                    }
                                    label=""
                                />
                                <ListItemText>Presença à beira do leito e observação contínua ou ativa por 4 horas ou mais em algum plantão por razões de segurança, gravidade ou terapia</ListItemText>
                            </ListItem>
                            <ListItem>
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            checked={checked2}
                                            onChange={handleChange({ checkValue: 4.3, totalValue: !checked2 ? totalValue+4.3 : totalValue-4.3 })}
                                            name="checked2"
                                            value={checkValue}
                                            color="primary"
                                        />
                                    }
                                    label=""
                                />
                                <ListItemText>Sinais vitais, cálculo e registro do balanço hídrico</ListItemText>
                            </ListItem>
                        </React.Fragment>
                    </List>
                </FormGroup>
                <Snackbar
                    anchorOrigin=
                    open={true}
                    message={totalValue}
                    action={submitButton}
                    className={classes.snackbar}
                />
            </form>

        </Paper>
    </React.Fragment>)
}

export default Checklist



Aucun commentaire:

Enregistrer un commentaire