Как использовать несколько переменных ref на одном элементе html в реаги? - PullRequest
Новая
       18

Как использовать несколько переменных ref на одном элементе html в реаги?

0 голосов
/ 14 апреля 2020

Вот краткий фрагмент метода рендеринга моего функционального компонента (для краткости удален ненужный код) 

  return (
    <Draggable draggableId={id} index={index}>
      {(provided, snapshot) => (
        <>
          <div className="carditem" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} onClick={onClick}>
            <span className="carditem_title">{card.title}</span>
            <i className="fas fa-pencil-alt edit_button" onClick={onEditClick} />
            {hasDescription && <i className="fas fa-align-left desc_tag" title="This card has a description" />}
          </div>
          {isEditing && showOverlay && <input className="card_edit" type="text" autoFocus />}
        </>
      )}
    </Draggable>
  );

В строке 5, если вы заметили, у меня есть 

ref={provided.innerRef}

I хочу получить координаты x, y div с className="cardItem", и поэтому я хочу добавить ссылку на этот элемент. Но ссылка уже существует, как показано выше. Как я могу добавить свою собственную переменную ref, не нарушая существующую ссылку?

Не уверен, поможет ли это, но я использую response-beautiful-dnd и откуда взялся этот provided.innerRef .

1 Ответ

1 голос
/ 14 апреля 2020

Вы можете использовать обратный вызов для привязки нескольких ссылок 

const refHanlder = el => {
  refA.current = el;
  refB.current = el;
}

ref={el => refHandler}

Обратный вызов также используется для массива ссылок 

ref={el => elementRef.current[x] = el}
...