Estoy tratando de verificar si se ha hecho clic aquí en algo que no sea la lista ordenada y sus hijos
function Heeeeelp😭() { function checkClick(e) { if (!e.target == first-list || children) { //looking for something like this //do something } } return ( <div onClick={e => {checkClick(e)}} className="container"> <ol className="first-list"> <li></li> <li></li> <li></li> </ol> <ul className="second-list"> <li></li> <li></li> <li></li> </ul> </div> )}Puede usar algo como esto if (e.target.closest('.second-list')) {..} , esta declaración, aquí hay un ejemplo completo
const { useState } = React; function Comp() { const [ clicked, setClicked ] = useState('NONE'); function checkClick(e) { if (e.target.closest('.first-list')) { setClicked('first list'); } if (e.target.closest('.second-list')) { setClicked('second list'); } } return ( <div onClick={e => {checkClick(e)}} className="container"> <ol className="first-list"> <li>first</li> <li>second</li> <li>third</li> </ol> <ul className="second-list"> <li>first</li> <li>second</li> <li>third</li> </ul> <div>Clicked List <strong>{ clicked }</strong></div> </div> )} ReactDOM.render( <Comp/>, document.body ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>He usado este patrón un montón y funciona (suponiendo que puedas usar ganchos). Se puede hacer un patrón equivalente sin ganchos si es necesario.
import { useRef, useEffect } from "react"; export default function App() { const listRef = useRef(null); const handleClickOutside = (e) => { if (listRef.current && !listRef.current.contains(e.target)) { console.log("Clicked somewhere besides the list."); } }; useEffect(() => { document.addEventListener("mousedown", handleClickOutside, true); return () => { document.removeEventListener("mousedown", handleClickOutside, true); }; }, []); return ( <div> <ol ref={listRef}> <li>List 0 Item 0</li> <li>List 0 Item 1</li> <li>List 0 Item 2</li> </ol> <ul> <li>List 1 Item 0</li> <li>List 1 Item 1</li> <li>List 1 Item 2</li> </ul> </div> ); }Puede escribir 2 funciones separadas, una para cada lista y pasarlas directamente a las listas en lugar de tratar de manejar todo desde el contenedor.
De esa manera, hacer clic en cualquier hijo de una lista activará el comportamiento deseado correcto
const Component = () => { const handleClickFirstList = () => { // do something } const handleClickSecondList = () => { // do something else } return ( <div className="container"> <ol className="first-list" onClick={handleClickFirstList}> <li></li> <li></li> <li></li> </ol> <ul className="second-list" onClick={handleClickSecondList}> <li></li> <li></li> <li></li> </ul> </div> )}