es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo asignar dos referencias al mismo elemento

01 Aug, 2023 Programación

Aquí estoy intentando asignar un ref de arrastrar de React dnd a un ref existente, pero no está sucediendo, ¿alguien puede ayudarme, por favor?

const refs = useRef<(HTMLDivElement | null)[][]>([]);
const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemType.item,
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));
  for (let curRow = 1; curRow <= props.row; curRow++) {
    for (let curCol = 1; curCol <= props.col; curCol++) {
      columns.push(
        <div onclickcapture="{()" ==""> moseHandler(curRow, curCol)}
          ref={(el) => {      //------------------------------>para este ref quiero asignar el ref de arrastrar
        refs.current[curRow] = refs.current[curRow] || [];
        refs.current[curRow][curCol] = el;
      }} 
      className="el1"
      id={`${curRow}${curCol}`}
      key={`${curRow}${curCol}${generateKey(curCol)}`}
    >
     {`${curRow}${curCol}`}
    </div>
  );
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando asignar un Drag ref a un ref existente pero no está ocurriendo. Una posible solución para esto es usar el gancho useRef() para crear un nuevo ref para el componente Drag y usarlo en el gancho useDrag(). Aquí tienes un ejemplo de cómo se puede hacer:

    const dragRef = useRef(null);

const [{ isDragging }, drag] = useDrag(() => ({
  type: ItemType.item,
  collect: (monitor) => ({
    isDragging: !!monitor.isDragging(),
  }),
  dragRef,
}));

// ...

<div ref="{(el)" ==""> {
    refs.current[curRow] = refs.current[curRow] || [];
    refs.current[curRow][curCol] = el;
    if (el) {
      dragRef.current = el;  // Asignar el Drag ref al ref del elemento
    }
  }}
  // ...
></div>

    En este ejemplo, creamos un nuevo ref llamado dragRef utilizando el gancho useRef(), y lo pasamos al gancho useDrag() como una opción. Luego, en la devolución de llamada del elemento ref, asignamos el ref del elemento al array de refs como antes, pero también verificamos si el elemento existe y le asignamos dragRef.

    De esta manera, dragRef debería apuntar al ref del elemento correcto y el componente Drag debería poder usarlo.

Comments are closed.