Найдите идентификатор div, используя объект события onMouseOver
Я написал приведенный ниже код, чтобы захватить id для div, когда пользователь hovers находится над div.
<div className = "part-3" id = "graph-1" onMouseEnter = {handleHover}>
<h3 className = "chartHeader">Avg. marks per subject </h3>
{<MarksDisplayTable/>}
</div>
Моя функция handleHover выглядит так:
const handleHover = (event) => {
console.dir("event = " + Object.keys(event));
}
Я ожидал, что ключ target будет содержать id для div. Но он состоит только из двух закрытых ключей.
Выход -
event = __reactFiber$593cb2h2ba,__reactProps$593cb2h2ba
Как я могу захватить действие id = graph-1 с помощью действия onMouseEnter?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вы можете использовать event.currentTarget.id. Если вы задаетесь вопросом, использовать ли currentTarget или target, текущая цель захватит родителя <div> независимо от того, наводите ли вы курсор на его дочерние элементы. Цель поймает детей, если вы наведете на них курсор.
function App(){
const handleHover = (event) => {
const { id } = event.currentTarget
console.info(event.currentTarget)
console.info(event.target)
console.info(id)
}
return (
<div className = "part-3" id = "graph-1" onMouseEnter = {handleHover}>
<h3 className = "chartHeader">Avg. marks per subject </h3>
<span>Something</span>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id = "app"></div>Чтобы захватить iddiv, когда пользователь наводит на него курсор, используя событие onMouseEnter в React, вы можете получить доступ к свойству target объекта события. Свойство target предоставит вам элемент DOM, вызвавший событие, и оттуда вы сможете получить доступ к его атрибутам, включая id.
Вот как вы можете получить id.
function App() {
const handleHover = (event) => {
const target = event.currentTarget;
const id = target.id;
console.info("id:", id);
};
return (
<div className='App'>
<div className = "part-3" id = "graph-1" onMouseEnter = {handleHover}>
<h3 className = "chartHeader">Avg. marks per subject</h3>
</div>
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id = "root"></div>В этом сценарии вы могли бы использовать event.target вместо event.currentTarget. Однако, чтобы надежно зафиксировать id, когда пользователь наводит курсор на div, вам следует использовать event.currentTarget, поскольку event.currentTarget всегда относится к элементу, к которому прикреплен обработчик событий.
В вашем случае он последовательно ссылается на элемент div с прослушивателем событий onMouseEnter, тогда как event.target относится к элементу, который фактически инициировал событие. Если пользователь наводит курсор на дочерний элемент внутри div (например, элемент <h3>), event.target будет указывать на этот конкретный дочерний элемент.
спасибо, хорошо объяснил. Я могу выбрать только один правильный ответ :)
const { useRef } = React;
const Example = () => {
const divRef = useRef(null);
const handleHover = () => {
console.info(divRef.current.id)
}
return (
<div ref = {divRef} id = "im-the-id-you-are-looking-for" onMouseEnter = {handleHover}>
give me the id!!
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example />
);<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id = "root"></div>вы также можете использовать useRef...
Хорошая мысль, спасибо +1
Спасибо. Теперь я могу получить правильный идентификатор, независимо от того, наводит ли пользователь курсор на дочерний элемент.