0

hola gente estoy usando material-ui para react y me encuentro en un problemita, en un archivo drawer.js tengo el siguiente codigo:

export default function SwipeableTemporaryDrawer(props) {

const classes = useStyles();
const [state, setState] = React.useState({
  left: false,
});

const toggleDrawer = (open) => (event) => {
  if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
    return;
  }

  setState({ ...state, ['left']: open });
};

const list = (anchor) => (
 <div
  className={classes.list}
  role="presentation"
  onClick={toggleDrawer(anchor, false)}
  onKeyDown={toggleDrawer(anchor, false)}
>
  <List>
    {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
      <ListItem button key={text}>
        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
        <ListItemText primary={text} />
      </ListItem>
    ))}
  </List>
  <Divider />
  <List>
    {['All mail', 'Trash', 'Spam'].map((text, index) => (
      <ListItem button key={text}>
        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
        <ListItemText primary={text} />
      </ListItem>
    ))}
  </List>
</div>
);

return (
<div>
    <React.Fragment >
      {props.init === true ? toggleDrawer(true): null}
      <SwipeableDrawer
        anchor={'left'}
        open={state['left']}
        onClose={toggleDrawer(false)}
        onOpen={toggleDrawer(true)}
      >
        {list('left')}
      </SwipeableDrawer>
    </React.Fragment>
</div>
);
}

el componte funciona de 10, pero quiero manejarlo desde otro archivo, en mi index.js que es el padre de rawer.js, tengo un boton y quiero que ese boton sea el manejador se el drawer, me pueden ayudar? por favor

2
  • Creo que lo mejor sería crear una variable de estado en el componente padre y que el botón cambie dicha variable. Cuando la variable cambie se va a renderizar de nuevo tu componente hijo y puedes pasarle la nueva información por medio de props.
    – FranAcuna
    el 13 jul. 2020 a las 5:20
  • si observas la segunda linea del return, debajo de la etiqueta <React.Fragment /> esta lo que tu dices , yo lo probe a eso que dices pero no se como hacerlo correctamente, lo que hace es si props.init es true se ejecuta toggleDrawer(true) de lo contrario devuelve null, pero esto claramente no me funciona
    – Enzo
    el 13 jul. 2020 a las 17:11

1 respuesta 1

-1

Esto definitivamente no va dentro del return...

{props.init === true ? toggleDrawer(true): null}

Disparas un this.setState() dentro del return, estás provocando un re-render si se cumple, lo mejor sería colocar un if, me sorprende que el APP no se cicle.

No necesitas

<React.Fragment >

Tu código está dentro de un <div>, no hace falta colocar un fragment.

De hecho, supongo que estás un poco perdido por la forma en la que MaterialUI coloca o explica cómo usar el temporary Drawer. La explicación que te dan, es para tener 4 Drawers en cada lado, pero solo querés el lado izquierdo.

Empecemos por el estado.

const [state, setState] = React.useState({
  left: false,
});
setState({ ...state, ['left']: open });

Simplificando:

const [state, setState] = React.useState(false);
setState(true);

Quedando así:

return (
   <div>
      <SwipeableDrawer
        anchor={'left'}
        open={}
        onClose={}
      >
        {list()}
      </SwipeableDrawer>
    </div>
);

Por lo que entiendo, props.init es el estado de 'open' & 'close' para el drawer. y es correcto, si vas a abrirlo desde un archivo externo, no necesitas un state local, aunque sí vendría bien un callback.

OnOpen es para un callback, no para ciclar de nuevo el state. OnClose es para un callback, no para ciclar el state.

Si el drawer se abre desde un padre, tienes que pasar los callbacks para cambiar el state. Y el state controlará al drawer, para una explicación más entendible:

Padre - state { open: false, handleOpen, handleClose };

Drawer: open = props.open;
Drawer: onClose = props.handleClose;

Suponiendo que tienes un botón, ese botón en su onClick sería handleOpen Y para cerrar en cualquier momento el drawer, disparas un handleClose Drawer dispara por sí mismo handleClose cuando presionas fuera de él.

Otra cosa, en List(); Estas funciones son también para llamar a un handleClose

  onClick={toggleDrawer(anchor, false)}
  onKeyDown={toggleDrawer(anchor, false)}

El código final, podría ser este:

import React, {useState} from 'react'

const Padre = (props) => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <div>
      <button onClick={handleOpen}>Abrir</button>
      <MyDrawer open={open} handleClose={handleClose}/>
    </div>
  )
}

export default Padre;

.

export default function MyDrawer(props) {
  const {open,handleClose} = props;
  const classes = useStyles();

  const list = () => (
   <div
    className={classes.list}
    role="presentation"
    onClick={handleClose}
    onKeyDown={handleClose}
  >
    <List>
      <ListItem button>
        <ListItemIcon>
          <MailIcon />
        </ListItemIcon>
        <ListItemText primary={'Test'} />
      </ListItem>
    </List>
  </div>
  );

return (
  <div>
    <SwipeableDrawer
      anchor={'left'}
      open={open}
      onClose={handleClose}
    >
      {list()}
    </SwipeableDrawer>
  </div>
  );
}

Me disculpas cualquier cosa que me haya comido, imposible testear.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.