Блог

Главная - Вопросы по программированию - Использование ссылки для поиска вложенного элемента

Использование ссылки для поиска вложенного элемента

#reactjs #gridjs

#reactjs #gridjs

Вопрос:

Я использую gridjs-react библиотеку для создания таблицы следующим образом:

 <Grid
  columns={['Name', 'Email']}
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  ref={tableRef}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

Однако я хочу в конечном итоге добавить элемент в dom, чтобы получить это:

введите описание изображения здесь

Я думал об использовании ref , но не смог получить доступ к следующему div, поскольку он отображается только после установки сетки компонентов: (Насколько я знаю)

введите описание изображения здесь

Комментарии:

1. это поле является Search компонентом, который вы выделяете. Вы не должны использовать Search поле для добавления новых значений к данным

Ответ №1:

Вы можете получить доступ к ссылке на сетку в useEffect блоке, когда все его содержимое будет отображено:

 useEffect(()=> {
    const grid = ref.current.wrapper.current; //--> grid reference
    const header = grid.querySelector(".gridjs-head"); //--> grid header
    const itemContainer = document.createElement("div"); //--> new item container
    header.appendChild(itemContainer);
    ReactDOM.render(<Input />, itemContainer); //--> render new item inside header
  }, []);

Вам нужно будет использовать css , чтобы получить желаемую позицию внутри элемента.

Рабочий пример: https://stackblitz.com/edit/react-r5gsvw

Ответ №2:

Или просто используйте CSS-решение для того компонента, который вы хотите.

например

 <div style={{ position: 'relative'}}>
    <Grid 
    ....
    />

    <MySearchComponent style={{ position: 'absolute', top: 0, right: 0 }} />
</div>
Метки: