Как получить элемент внутри цели клика?

Question

[historydev]

Добрый день. Скажите пожалуйста, я туплю видимо дико, что я сделал не так?

TypeError: Cannot read property 'innerText' of null

<ul className='select selectDefault globalSelect' onClick={(e) => document.querySelector('#hide').value = e.target.querySelector('li').innerText}>
                        <li> {view[0].name} </li> <i className='fas fa-chevron-down' />
                        <div className="selectContent">
                            {view.map(el => (<li onClick={(e) => selectItem(e)} key={el.id}>{el.name}</li>))}
                        </div>
                    </ul>

Спасибо.

Answer 1

[0xD34F]

Если отвечать на вопрос из заголовка - надо target заменить на currentTarget.

Но можно ответить и на тот, что в основном тексте:

что я сделал не так?

Почему у вас внутри ul находятся i и div? Почему li находится внутри div? Разберитесь, кого чьим контентом можно и нельзя делать.

Стучаться напрямую к элементам не надо: значение #hide должно браться из стейта, обновлять надо стейт; innerText, который вы хотите получить - его также надо брать из стейта.

Метод selectItem - подумайте, как его переписать так, чтобы вместо объекта события (который вам нужен ради свойства target, да?) он принимал данные, на основе которых создан li.

Comments

[historydev]

Спасибо)

Answer 2

[Dima Polos]

Вы когда в реакте работаете Вам в 90% случаев НЕ нужен DOM. Вообще у любого элемента DOM есть метод querySelector, или свойства children, и тд.

Comments

[historydev]

Как мне в таком случае корректно получить желаемое?

[Dima Polos]

Владимир, что должно произойти по клику?
Вам нужно логику привязать к данным - к состояниям компонентов и работать не с html, а с компонентами.

[historydev]

Dima Polos, у меня самодельный select, решил не заморачиваться с оформлением кастомного, мне нужно в соответствующее скрытое поле, вставлять данные выбранные из select.

[Dima Polos]

Владимир, ну вот селект - компонент, в нем еще компонент - какой-нибудь список из компонентов, в каждый компонент списка спускаете текст и значение, туда же передаете функцию, что если по тебе кликнули - отдай родителю свое поле значение, а родитель куда-то в своем стейте это значение сохранит.

[historydev]

Dima Polos, то есть мне нужно делать компонент даже для простого инпута?

[Dima Polos]

Владимир, зависит от задачи, но иногда да, даже так.

[historydev]

Dima Polos, я пробовал, мне не зашло, слишком много места это всё занимает, но я учту, спасибо

[Dima Polos]

Владимир, просто querySelector и тд это ломает архитектуру - раз, а во-вторых, Вы понимаете как реакт работает с DOM? В любой момент реакт может посчитать нужным создать новый DOM, и ссылки, которые Вы получили через querySelector не будут работать, вот и ловите null, undefined и тд.

[historydev]

Dima Polos, да-да я понял, не правильно использую инструмент, но здесь пока важна скорость, уделю время этому чуть позже, спасибо большое.