3

estoy haciendo varios ejercicios de react, y como hay varias maneras de declarar un componente, opte por funciones flecha, mi duda es que no me funciona el setState para cambiar los valores del state dentro de mi componente cuando paso el mouse por encima.

import React, { Component } from "react";
import Botones from './BotonesDeColores'
import Header from './ContentHeader'


const handleMouseMove = (e) => {
const { ClientX, ClientY } = e
this.setState({
    mouseX: ClientX, mouseY: ClientY
})
}

const handleClick = (e) => {
console.log(e)
alert('hi there!')
}

const EventMouseMove = (state) => {

state = {
    mouseX: 0,
    mouseY: 0
}

return (
    <div className="content-wrapper">
        {/* Content Header (Page header) */}
        <Header />
        {/* Main content */}
        <section className="content">
            <div className="container-fluid">
                <Botones />
                {/* DEBAJO VA EL CONTENIDO DE LA PAGINA */}
                <button onClick={handleClick}> Hi there!</button>
                <div
                    style={{ border: "1px solid #000", marginTop: 10, marginBottom: 10 }}
                    onMouseMove={handleMouseMove}
                >
                    <p>{state.mouseX}, {state.mouseY}</p>
                </div>
            </div>
        </section>
    </div>
);
};

export default EventMouseMove;

aqui esta el div donde los numeros se deberian actualizar cuando muevo el mouse introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

6
  • 3
    Hola. Bienvenido. Está muy bien la pregunta, pero ¿podrías editarla agregando el código como texto, no como imagen? De esa forma le estarías ahorrando dolores de cabeza a quienes quieren responderte copiando y pegando. Agregar imágenes está perfecto como forma de agregar más info, pero el código principal debería estar como texto.
    – Pollo
    el 6 oct. 2020 a las 14:30
  • sisi ahi lo agrego perdon, es mi primer post xD el 6 oct. 2020 a las 14:48
  • Tua handlers deben ir dentro de tu componente, EventMouseEvent
    – Isaac
    el 7 oct. 2020 a las 6:27
  • ya los lleve dentro de mi componente, y si agrego la palabra this. a los eventos del div, no me funciona (dice que los handle no estan definido). si saco el this. , me da un error que el this.setState no esta definido. todo esos errores si estan dentro del componente. el 9 oct. 2020 a las 10:19
  • ¿Dónde encontraste este ejercicio de React? Creo que necesitas usar class como class EventMouseMove extends Component {.... para usar this.setState o hooks.
    – milmal
    el 16 oct. 2020 a las 6:37

1 respuesta 1

0

Bueno amigo veo que tienes un par de problemas, uno con React y otro con JavaScript.

Por el lado de javascript el this que estas usando no apunta al componente, de echo apunta al window o globalThis, asi que nunca encontraras ese tal setState en ese this.arrow function documentación

Por el lado de React, no podes usar state y setState en un componente funcional, bien como dices hay varias formas de crear un component, tambien hay varias formas para manejar estado de acuerdo al tipo de componente, en el caso tuyo que quieres usar un componente funcional con un arrow function, debes usar Hooks y mas especifico el useState. useState documentación

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.