Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Setar valor em input ao clicar um botão

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>
        </>
    );
}
1 resposta
solução!

Resolvi, foi só mudar isso:

<IconButton onClick={() => unidadeID.setUnidadeID(unidade.id)} aria-label="Selecionar">