Tengo una lista de eventos que se puede desplazar en el eje y, como se muestra a continuación:
{events.map((event) => ( <li ref={event.ref} key={event.id} > {event.name) </li> ))}Al hacer clic en un botón, me gustaría que el evento que especifique se desplace a la parte superior de la lista mapeada anterior.
Actualmente estoy usando useRef, pero no estoy seguro de cómo especificar el evento exacto que me gustaría desplazar hacia arriba.
Por ejemplo, digamos que me gustaría desplazarme al evento con una identificación de 5, al hacer clic en el botón.
Aquí está mi código actual:
const eventRef = useRef(null); const scrollToMyRef = () => eventRef.current.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest", }); <button onClick={() => scrollToMyRef()} > Click me </button>Realizaría un seguimiento de a qué event.id desea desplazarse en el estado, y luego solo mostraría una ref en el evento que coincida con la id en el estado.
const Example = (props) => { const [id, setId] = useState('1'); const ref = useRef(null); const handleButtonClick = () => ref.current.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest', }); return ( <> <button onClick={handleButtonClick}>Click me</button> {events.map((event) => ( <li ref={event.id === id ? ref : null} key={event.id}> {event.name}) </li> ))} </> ); };