Cada vez que realiza un procesamiento en React.js, la interfaz de usuario se desplaza a la parte superior de la página.
JSFiddle: http://jsfiddle.net/bengrunfeld/dcfy5xrd/
¿Alguna forma ingeniosa o reactiva de detener eso?
Por ejemplo, si un usuario se desplaza hacia abajo en la página y luego presiona un botón que provoca un procesamiento, la interfaz de usuario permanecerá en la misma ubicación de desplazamiento que antes.
// Forces a render which scrolls to top of page this.setState({data: data});ACTUALIZACIÓN: ¿Por qué la interfaz de usuario se desplaza hacia la parte superior para algunos renderizados, pero no para otros?
Ok, si alguien leyó esto, en mi caso, el problema no fue ninguno de los anteriores. Debe probar las primeras sugerencias de arriba de cualquier manera. Hice todo, incluido preventDefault() , pero no me ayudó. El problema era ; usando styled-components . Porque los componentes con estilo dan un nombre de clase aleatorio en cada renderizado. Entonces restablece el desplazamiento. Di el nombre de la clase de css y resolví mi problema.
@floydophone respondió esto en Twitter.
https://twitter.com/floydophone/status/608129119025561600
@bengrunfeld @reactjs olvidaste
preventDefault()en tus controladores de enlaces
Quería agregar aquí para aquellos que no usan etiquetas de anclaje, preventDefault no lo salvará. Tan extraño como es, para mí estaba relacionado con representar mis componentes secundarios dentro de un div con
display:table > display:tablecellPor alguna razón, la posición de desplazamiento del componente secundario se pierde en esta situación cuando se vuelve a procesar. El problema desapareció cuando cambié a flexbox (display:flex).