I have onClick function but I cannot access to its children elements from the event
<code><div className="sortingBy" onClick={openSoring}>
<div className="checkBox" ></div>
</div>
</code>
<code><div className="sortingBy" onClick={openSoring}>
<div className="checkBox" ></div>
</div>
</code>
<div className="sortingBy" onClick={openSoring}>
<div className="checkBox" ></div>
</div>
My function:
<code>const openFilter=(e)=>{
e.target.querySelector('.checkBox').classList.toggle('active')
}
</code>
<code>const openFilter=(e)=>{
e.target.querySelector('.checkBox').classList.toggle('active')
}
</code>
const openFilter=(e)=>{
e.target.querySelector('.checkBox').classList.toggle('active')
}
These codes are in react.
After using that code I get this error
<code>e.target.querySelector(...) is null
</code>
<code>e.target.querySelector(...) is null
</code>
e.target.querySelector(...) is null
How can I access to children elements from event variable in onClick property?
3
You’ll need to use currentTarget. The target self will be the deeper div that has no children.
<code>const { useState } = React;
const Example = () => {
const openFilter=(e)=>{
console.log('target: ', e.target);
console.log('currentTarget: ', e.currentTarget);
e.currentTarget.querySelector('.checkBox').classList.toggle('active')
}
return (
<div>
<h1>{'Example'}</h1>
<div className="sortingBy" onClick={openFilter}>
<div className="checkBox">Click Me</div>
</div>
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));</code>
<code>const { useState } = React;
const Example = () => {
const openFilter=(e)=>{
console.log('target: ', e.target);
console.log('currentTarget: ', e.currentTarget);
e.currentTarget.querySelector('.checkBox').classList.toggle('active')
}
return (
<div>
<h1>{'Example'}</h1>
<div className="sortingBy" onClick={openFilter}>
<div className="checkBox">Click Me</div>
</div>
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));</code>
const { useState } = React;
const Example = () => {
const openFilter=(e)=>{
console.log('target: ', e.target);
console.log('currentTarget: ', e.currentTarget);
e.currentTarget.querySelector('.checkBox').classList.toggle('active')
}
return (
<div>
<h1>{'Example'}</h1>
<div className="sortingBy" onClick={openFilter}>
<div className="checkBox">Click Me</div>
</div>
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));<code>.active {
border: 1px solid green;
}</code>
<code>.active {
border: 1px solid green;
}</code>
.active {
border: 1px solid green;
}<code><script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div></code>
<code><script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div></code>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>