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

Question

我正在映射编队列表，当我 select 一个复选框时，我想在 onChange 中创建一个动态数组。
目标是用他们可以分配的阵型来更新我的组织。不要在意 formation.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>

感谢您的阅读和帮助。

祝你有愉快的一天。

鲁尔丹。

Answer 1

您可以将您的 ID 传递给状态属性并使用类似

const [state, setState] = useValue([]);

function handleChange(id) {
  setState(value => value.map(item => item.id === id ? ({ ...item, dispensed: true }) : item)); 
}

// 

onChange={() => handleChange(formation.id)}

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

How to create dynamic array using checkbox and mapping in React JS?

javascript

arrays

checkbox

reactjs

material-ui