Preciso que ao clicar o ultimo iconbutton do código, gostaria que preenchesse o input que tem id com nome UnidadeID, só que ele fica sempre travado o valor do ultimo item do array, como resolvo isso?
const useStyles = makeStyles((theme) => ({
appBar: {
position: 'relative',
},
title: {
marginLeft: theme.spacing(2),
flex: 1,
},
}));
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
export default function ConsultaUnidade({unidadeID}) {
const classes = useStyles();
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
function handleKey(event){
if(event.key=="-"){
setOpen(true);
}
}
const unidades=[
{id:"1", descricao:"1 Unidade", sigla:"UN"},
{id:"2", descricao:"1 Litro", sigla:"LT"},
{id:"3", descricao:"1 Quilo", sigla:"KG"},
{id:"4", descricao:"Pacote com 10", sigla:"PCT"}
];
return (
<>
Unidade:
<Grid container spacing={1} alignItems="center" justify="flex-start">
<Grid item xs={3} sm={2}>
<TextField
onKeyPress={handleKey}
onChange={(event) => {unidadeID.setUnidadeID(event.target.value);}}
value={unidadeID.unidadeID}
id="id"
label="ID"
type="text"
variant="outlined"
fullWidth
size="small"
margin="dense"
/>
</Grid>
<Grid item xs={7} sm={9}>
<TextField
id="descricao"
label="Descricao"
type="text"
variant="outlined"
fullWidth
size="small"
margin="dense"
/>
</Grid>
<Grid item xs={1} sm={1}>
<IconButton onClick={handleClickOpen}>
<SearchIcon/>
</IconButton>
</Grid>
</Grid>
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<Container maxWidth="md">
<Paper variant="outlined">
<Table>
<TableHead>
<TableRow selected>
<TableCell> ID </TableCell>
<TableCell> Descrição </TableCell>
<TableCell> Sigla </TableCell>
<TableCell> Operações </TableCell>
</TableRow>
</TableHead>
<TableBody>
{unidades.map((unidade) => (
<TableRow key={unidade.id}>
<TableCell> {unidade.id} </TableCell>
<TableCell> {unidade.descricao} </TableCell>
<TableCell> {unidade.sigla} </TableCell>
<TableCell align="right">
<Grid container>
<IconButton onClick={unidadeID.setUnidadeID(unidade.id)} aria-label="Selecionar">
<SubdirectoryArrowRightIcon />
</IconButton>
</Grid>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
</Container>
</Dialog>
</>
);
}