如何在React JS中使用复选框和映射创建动态数组?

Question

我正在映射一个列表，我想在onChange中创建一个动态数组，当我选择一个复选框。
目标是用他们可以分配的阵型更新我的组织。不要小心form .name，它只是为了看看我的映射是否工作:)

我想要一些像

{
{
formation.id: idFormation1,
dispensed: true
},
{
formation.id: idFormation2,
dispensed: false
}
}

下面是模态的代码:

<Modal
cancelSubmitButton={cancelSubmitButton}
title={title}
titleButtonModal={titleButtonModal}
submit={onSubmit}
classModal={classes.modal}
classButton={'button-formation ' + classes.button}
icon={icon}
activeIcon={activeIcon ? activeIcon : false}
disabledModalButton={''}
openedFunction={onOpen}
titleButton={titleButton ? titleButton : title}
closedFunction={closedFunction}
classIconButton={classIconButton}>
<Grid container spacing={1}>
<Grid item xs={6}>
<span className={classes.breakWord}>
<b>Raison sociale :</b> {organization.name}
</span>
</Grid>
<Grid item xs={6}>
<span className={classes.breakWord}>
<b>NDA :</b> {organization.activityDeclaration}
</span>
</Grid>
</Grid>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell classes={{root: classes.cellWidthLarge}}>
Formations disponibles au catalogue
</TableCell>
<TableCell classes={{root: classes.cellWidthSmall}}>
Prix
</TableCell>
<TableCell classes={{root: classes.cellWidthLarge}}>
Date d'effet prix
</TableCell>
<TableCell classes={{root: classes.cellWidthLarge}}>
Unité
</TableCell>
<TableCell classes={{root: classes.cellWidthMedium}}>
Formations dispensées par l'organisme
</TableCell>
<TableCell classes={{root: classes.cellWidthSmall}}>
Association
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{formations && formations.length >0 && formations.map(formation => (
<TableRow key={formation.id}>
<TableCell >{formation.name}</TableCell>
<TableCell>{formation.name}</TableCell>
<TableCell>{formation.name}</TableCell>
<TableCell>{formation.name}</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
checked={dispensed}
onChange={_onChange('dispensed')}
name="Formations dispensées par l'organisme"
/>
}
/>
</TableCell>
<TableCell>
<div className={classes.flex}>
<Tooltip title={'Associations'}>
<IconButton
className={'button-formation'}
aria-label="expand row"
size="medium"
onClick={handleExpandFirstClick}>
<FormatListIcon />
</IconButton>
</Tooltip>
</div>
</TableCell>
</TableRow>
))}
<TableRow>
<TableCell style={{paddingBottom: 0, paddingTop: 0}} colSpan={6}>
<Collapse
classes={{wrapperInner: classes.borderExpand}}
in={openFirst}
timeout="auto"
unmountOnExit>
</Collapse>
<p>Hi</p>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Modal>

感谢您的阅读和帮助。

祝你过得愉快。

Ruldane .

Answer 1

您可以将id传递给state属性，并使用类似

的内容

const [state, setState] = useValue([]);
function handleChange(id) {
setState(value => value.map(item => item.id === id ? ({ ...item, dispensed: true }) : item)); 
}
// 
onChange={() => handleChange(formation.id)}