Tengo un área de texto y dos botones (arriba y abajo).
¿Cómo puedo desplazarme hacia arriba y hacia abajo línea por línea en el área de texto usando los botones arriba y abajo con React.js?
Algo así como si estuviera escribiendo una nota y muevo el cursor de texto hacia arriba y hacia abajo en los párrafos usando las teclas arriba y abajo de mi teclado.
Imagen: https://i.stack.imgur.com/9eEXU.png
Código simplificado:
import React from "react"; export default function App() { return ( <div> <button>Up</button> <br /> <textarea placeholder="YOUR NOTES" /> <br /> <button>Down</button> </div> ); }Un amigo me ayudó. Pensé que debería volver aquí y compartir la solución con todos los demás que pudieran necesitarla en el futuro.
import React from "react"; const goUp = (id) => { var maxScrollTop = id.scrollHeight - id.clientHeight; if (id.scrollTop !== 0) { id.scrollTo({ top: id.scrollTop - 10, left: 0, behavior: "smooth" }); } }; const goDown = (id) => { var maxScrollDown = id.scrollHeight - id.clientHeight; id.scrollTo({ top: id.scrollTop + 10, left: 0, behavior: "smooth" }); }; export default function App() { const okay = document.getElementById("text"); return ( <div> <button onClick={() => goUp(okay)}>Up</button> <br /> <textarea id="text" placeholder="YOUR NOTES" /> <br /> <button onClick={() => goDown(okay)}>Down</button> </div> ); }