0
255
Visualizações¿Por qué "esto" regresa indefinido de mi componente funcional en ReactJS?
Todavía soy un principiante en ReactJS y JavaScript y tengo problemas para usar this .
Estoy representando una lista de propiedades y cuando hago onMouseOver me gustaría obtener el elemento sobre el que estoy pasando el mouse con this . Pero está regresando undefined .
¿Puedes decirme por qué estoy recibiendo este error?
Aquí está mi código que puse en codesandbox.io
Muchas gracias por adelantado.
import React from "react"; import "./styles.css"; import Property from "./components/Property"; import { mock } from "./data/mock"; export default function App() { const [data] = React.useState(mock.data.dora.exploreV3.sections[2].items); return ( <div className="App"> <h1>Hello CodeSandbox</h1> {data.map((item) => ( <Property key={item.listing.id} item={item} /> ))} </div> ); } import React from "react"; const Property = ({ item }) => { return ( <div style={{ padding: "5px 0", cursor: "pointer" }} onMouseOver={() => console.log("item: ", this)} > {item.listing.name} </div> ); }; export default Property;2 Respostas
Responde à pergunta0
La razón por la que su código no funciona como esperaba es porque this está vinculado al elemento durante la representación. Debe acceder al elemento utilizando el destino MouseEvent. Su componente de propiedad debería verse así:
import React from "react"; const Property = ({ item }) => { return ( <div style={{ padding: "5px 0", cursor: "pointer" }} onMouseOver={(event) => console.log("item: ", event.target)} > {item.listing.name} </div> ); }; export default Property; Alternativamente, puede usar useRef de React para hacer esto. Aquí hay un buen artículo que explica cómo implementar eso: https://linguinecode.com/post/get-current-element-react-onmouseover-or-onmouseenter
0
Las funciones de flecha gruesa no pueden acceder a la palabra clave "esta". Intente actualizar la función como una función normal.
Esto podría ser útil: https://www.section.io/engineering-education/how-to-use-javascript-arrow-functions-and-this-keyword/