Хук useRef для динамического «onOutsideClick»?
Я создаю панель инструментов, которая будет содержать набор элементов, которые можно редактировать по отдельности, если пользователь войдет в «Режим редактирования», щелкнув значок. Пока пользователь находится в этом режиме, приложение должно показывать ему всплывающее окно, если он щелкает за пределами элемента, который редактирует в данный момент, поэтому я начал пытаться реализовать что-то вроде это. Но моя проблема заключалась в том, что элементы на панели инструментов будут генерироваться динамически из массива и функции карты. Поэтому я хочу динамически назначать ссылки каждому из этих элементов. Я использую только функциональные компоненты без сохранения состояния и стилизованные компоненты.
Я попытался адаптировать решение Refs для динамически генерируемых компонентов в React? для использования с новым хуком useRef. Однако прямо сейчас с моей реализацией ref.current для каждого элемента есть undefined, плюс я получаю ошибку Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? в консоли.
Рабочая демонстрация: https://codesandbox.io/s/dynamic-useref-clf1z
Редактировать: на самом деле это будет отличаться от кода и поля внешнего оповещения, потому что «внешняя область» будет меняться в зависимости от того, какой элемент редактируется, то есть это будет все на панели инструментов за пределами этого элемента.
Ответы 1
Вы почти у цели, вам просто нужно использовать forwardRef в вашем дочернем компоненте, как описано в документы:
const Item = React.forwardRef((props, ref) => {
return (
<Container ref = {ref} onClick = {e => props.handleBoxClick(e, props.index)}>
{props.itemId}
</Container>
);
});
export default Item;