Tengo un acordeón de columna de tabla de arranque de reacción que tiene contenido. Me enfrento al problema de que si el panel abre, el usuario no puede identificar el contenido hasta que se desplaza hacia abajo.
Quería poder desplazarme hacia abajo hasta el contenido cuando se abre el colapso del acordeón.
Así es como se ve mi componente de función principal,
import React, {forwardRef, useContext} from "react"; import AccordionContext from "react-bootstrap/AccordionContext"; import { Table } from "react-bootstrap"; function CustomToggle({ children, eventKey, callback, className }) { const currentEventKey = useContext(AccordionContext); const decoratedOnClick = useAccordionToggle( eventKey, () => { let eventType = `${currentEventKey ? 'close' : 'open'}`; callback && callback(eventKey,eventType) }, ); return ( <tr onClick={decoratedOnClick}> <td><Image src={"accordion_arrow_down.svg"} /></td> </tr> ) } function ParentComponent() { const scrollDownRef = React.useRef(null); const toggleHandle = (eventKey,eventType) => { if(scrollDownRef && scrollDownRef.current) { scrollDownRef.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" }); } } return ( <div> <Table> <tbody> <CustomToggle callback={toggleHandle} eventKey={{}} /> <tr> <td> <Accordion.Collapse eventKey={{}}> <ChildComponent ref={scrollDownRef} /> </Accordion.Collapse> </td> </tr> </tbody> </Table> </div> ) }y el componente secundario se ve a continuación,
function ChildComponent({ref}) { return ( <div> <Form> <div ref={ref}> </div> </Form> </div> ) } export default forwardRef(ChildComponent) También probé con la función setTimeout , si el elemento ref debe identificarse si hay algún retraso con el tiempo de apertura del acordeón. Nada funcionó aquí.
He probado otros métodos de scroll en lugar de la función scrollIntoView . Pero tampoco hacer nada a la página.
¡Cualquier ayuda sería apreciada!
He intentado usar su código pero contiene muchos errores aquí y allá. Así que he creado un ejemplo simple que puedes usar.
En aplicación.js
import React, { useState, forwardRef, useRef } from "react"; import { Accordion, Table, Card, Container } from "react-bootstrap"; const ChildComponent = forwardRef((props, ref) => { return ( <div> <Accordion.Collapse eventKey="0" className="border"> <Card.Body style={{ height: "calc(100vh + 200px)" }} className="d-flex align-items-end justify-content-center" > <Container> <div ref={ref}> Some Content. Lorem Ipsum. Hello World.</div> </Container> </Card.Body> </Accordion.Collapse> </div> ); }); const App = () => { const [activeEventKey, setActiveEventKey] = useState(""); const accordElem = useRef(null); const handleClickToggle = (eventKey) => { if (eventKey === activeEventKey) { setActiveEventKey(""); } else { setActiveEventKey(eventKey); //Handle Scroll here when opening setTimeout(() => { accordElem.current.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest", }); }, 400); } }; return ( <div> <Accordion activeKey={activeEventKey}> <Table> <tbody> <tr> <Accordion.Toggle as="td" eventKey="0" onClick={() => handleClickToggle("0")} > Add Mock </Accordion.Toggle> </tr> <tr> <td> <ChildComponent ref={accordElem} /> </td> </tr> </tbody> </Table> </Accordion> </div> ); }; export default App;Explicación:
Aquí hay un enlace de CodeSandbox con un ejemplo: https://codesandbox.io/s/festive-sun-o0e4ih