0
167
ViewsBotones de radio React Hook en la función de mapa
Tengo una función de mapa dentro de una función de mapa donde necesito obtener valores de un botón de opción. pero el problema es que necesito seleccionar un botón de opción de una fila pero seleccionaría todo A continuación está mi código
<TableHead> <TableRow> <TableCell /> <TableCell align="center">None</TableCell> {roleTypeProject.map(item => { return <TableCell align="center">{item.label}</TableCell>; })} </TableRow> </TableHead> <TableBody> <TableRow key={item.id}> <TableCell>{item.label}</TableCell> <TableCell align="center"> <Controller name={`radio_${item.name}`} control={control} render={({ field }) => { return ( <Radio {...field} name={`radio_${item.name}`} color="primary" disabled={item.name === 'owner'} value="none" inputProps={{ 'aria-label': item.name }} /> ); }} /> </TableCell> {roleTypeProject.map(p => { return ( <TableCell align="center"> <Controller name={`radio_${item.name}`} control={control} render={({ field }) => { return ( <Radio {...field} name={`radio_${item.name}`} disabled={ item.name === 'owner' && p.name === 'viewer' } color="primary" value={`${item.id} ${p.id}`} inputProps={{ 'aria-label': item.name }} /> ); }} /> </TableCell> ); })} </TableRow> Así que descubrí mi carga útil y el único problema que tengo en este momento es que todos los botones de opción se pueden seleccionar mientras quiero uno de ellos por fila. 
1 answers
Answer question0
Traté de reproducir su escenario sobre la base de su fragmento de código, no estoy seguro de si la estructura de datos es correcta o es la misma que en su código (combiné ambas matrices en mi ejemplo de código, pero debería entender la idea). El problema en su código es que itera roleTypeProject fuera del <Controller /> mientras que en su lugar debe hacerlo dentro del render prop. De esta manera, habrá un campo para cada fila que RHF puede administrar.
<Table> <TableHead> <TableRow> <TableCell /> {columns.map(({ id, label }) => ( <TableCell key={id} align="center"> {label} </TableCell> ))} </TableRow> </TableHead> <TableBody> {rows.map(({ id, name, label }) => ( <TableRow key={id}> <TableCell>{label}</TableCell> <Controller name={name} control={control} render={({ field: { value, ...field } }) => columns.map(({ id, name: optionName }) => ( <TableCell key={id}> <Radio {...field} checked={value === optionName} value={optionName} /> </TableCell> )) } /> </TableRow> ))} </TableBody> </Table> 