Soy becario ReactJs, cómo usar reactJs de múltiples cajones en la misma página.
codificar mi archivo App.js
App = () =>{ const [visible, setVisible] = useState(false); const showDrawer = () => { setVisible(true); }; const onClose = () => { setVisible(false); }; return( // drawer 1 <Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 1</Button> <Drawer className="modal-form"onClose={onClose} visible={visible}> content </Drawer> // drawer 2 <Button type="primary" className="btn-submit" onClick={this.showDrawer}>submit drawer 2</Button> <Drawer className="modal-form"onClose={onClose} visible={visible}> content </Drawer> ) }¿Cómo puedo hacer clic en la etiqueta del botón para mostrar el cajón correspondiente? por favor! ayúdame.
Si estos cajones contienen contenido diferente, deberá administrar dos variables de estado para cada cajón para controlar la visibilidad del cajón.
App = () =>{ const [visibleDrawer1, setVisibleDrawer1] = useState(false); const [visibleDrawer2, setVisibleDrawer2] = useState(false); const showDrawer1 = () => { setVisibleDrawer1(true); }; const onCloseDrawer1 = () => { setVisibleDrawer1(false); }; const showDrawer2 = () => { setVisibleDrawer2(true); }; const onCloseDrawer2 = () => { setVisibleDrawer2(false); }; return( // drawer 1 <Button type="primary" className="btn-submit" onClick={this.showDrawer1}>submit drawer 1</Button> <Drawer className="modal-form"onClose={onCloseDrawer1} visible={visibleDrawer1}> content </Drawer> // drawer 2 <Button type="primary" className="btn-submit" onClick={this.showDrawer2}>submit drawer 2</Button> <Drawer className="modal-form"onClose={onCloseDrawer2} visible={visibleDrawer2}> content </Drawer> ) }