Quiero poder desplazarme entre los componentes de la tabla en mi aplicación React. Creé un componente para una tabla llamada FormattedTable que toma accesorios y muestra toda la información que quiero.
Muchas de las tablas hacen referencia a otras tablas con texto en el que se puede hacer clic. Si hace clic en una referencia a otra tabla y no se muestra, agrego la tabla a la pantalla y la aplicación se desplaza automáticamente hasta la parte inferior de la pantalla donde se agregó la tabla. Sin embargo, si la tabla ya se muestra, quiero que la aplicación se desplace a donde ya se muestra.
Hacer clic en la referencia y agregar otra tabla ocurre en el archivo FormattedTable.js.
En mi Home.js tengo una matriz de objetos llamados selected y esta matriz contiene todos los objetos que quiero que se muestren en las tablas. Muestro las tablas mapeando la matriz selected creando un componente FormattedTable en cada iteración.
Inicio.js
<div className="rightColumn" style={{flex: 4}}> {selected.length > 0 ? selected.map((obj, index) => { return ( <div style={{width: '60%'}}> <FormattedTable data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected}/> </div> ) }) : null} </div>Debido a que las tablas formateadas se crean dinámicamente en el archivo Home.js, no estoy seguro de cómo desplazarme de una tabla a otra en FormattedTable.js (ya que solo hay 1 archivo pero varias instancias).
¿Alguien sabe cómo sería posible hacer esto en el archivo FormattedTable.js?
Lo que he intentado hasta ahora es agregar una referencia al div que se crea dinámicamente en Home.js y también pasar un método triggerScroll al componente FormattedTable para que pueda activar el desplazamiento cuando se hace clic en una referencia en una tabla. Sin embargo, el problema con esto es que todavía se desplaza hasta el último elemento, ya que el valor de la referencia es (naturalmente) el último elemento de la matriz cuando se detiene el mapeo.
<div className="rightColumn" style={{flex: 4}}> {selected.length > 0 ? selected.map((obj, index) => { return ( <div ref = {scrollRef} style={{width: '60%'}}> <FormattedTable data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected} triggerScroll={scrollToTable}/> </div> ) }) : null} </div>Me arreglé:
Se agregó un atributo a cada objeto en la matriz selected llamada inFocus . El objeto seleccionado más recientemente en la matriz tiene un valor de verdadero para este atributo.
Luego agregué un ternario para configurar la referencia de FormattedTable en función del atributo inFocus para que solo se establezca un objeto como referencia a la vez.
FormattedTable.js
//For selecting results const select = (name) => { //Deep clone object so that results doesn't change when selected changes const obj = cloneDeep(data.find(element => element.name === name)); const refObj = data.find(element => element.name === name); //If object is in the original JSON array if(typeof refObj !== 'undefined') { //If object is not in the selected array, add it to selected array if(selected.find(element => element.name === name) === undefined) { //Make the new object in focus and remove the focus for all the other objects obj.inFocus = true; copy.map((el) => { if(el.name !== obj.name) { el.inFocus = false } }) handleSelectedChange([...copy, obj]); } //Otherwise, set focus to selected object else { //Make the selected object in focus and remove the focus for all the other objects copy.map((el) => { if(el.name !== obj.name) { el.inFocus = false } else { el.inFocus = true } }) handleSelectedChange([...copy]); } } } return ( <div ref={obj.inFocus ? messagesEndRef : null} style={{display: 'flex', flexDirection: 'row'}}> ... )