1

Mi problema surge ya que al parecer las funciones que estoy creando se estan llamando antes de renderisar mi html, yo quiero que solo aparescan cuando se interactue con estas no cuando se llame el archivo, Siendo el siguiente erro:

introducir la descripción de la imagen aquí

y el codigo completo:

import './Home.css'
import { Component } from 'react';

class Home extends Component{

    btclick (){
        document.getElementById("tituloCambia").innerText = "Cambio"
    }

    render(){
        return(
            <div>
                <h1 id="tituloCambia" class="margin">Home Component!!</h1>
                <p>Cambiar texto!!!</p>
                <button onClick={this.btclick()}>
                    Cambiar
                </button>
            </div>
        )
    }
}

se supone que en este caso no se tendria que llamar a btclick, verdad?, pero por lo que veo esto no pasa asi, muestra como si el objeto no existiera, no se si estoy ignorando un paso o estoy haciendo mal algo

1 respuesta 1

5

Eso sucede porque a las funciones onClick de React hay que llamarlas con un callback así:

 <button onClick={() => this.btclick()}>       

De lo contrario se ejecutarán automáticamente siempre durante el primer render.

Y aprovecho para hacerle otra observación a tu código.

En React no es una buena práctica afectar el DOM mediante JavaScript usando por ejemplo document.getElementById("algunDIV").innerText = "Nuevo contenido".

Hacer eso haría que carezca de sentido utilizar un framework y sería lo mismo que trabajar con JavaScript nativo.

Así que para actualizar al DOM, en React es mejor utilizar JSX. Que es lo que permite, mediante el uso de los estados, ir modificando dinámicamente lo que se renderizará en el DOM.

Usarlos es muy sencillo. En tu caso, como estás usando la versión de React que utiliza componentes de clases, se declara dentro del contructor(). Luego se van modificando con los this.setState.

A continuación te muestro un ejemplo de su uso con el código que ya tienes hecho:

import './Home.css'
import { Component } from 'react';

class Home extends Component{

  constructor(props) {
        
    super(props);
    
    this.state = { newTitle: 'Home Component!!' }

  }   

    btclick (){
        // document.getElementById("tituloCambia").innerText = "Cambio"
        this.setState({newTitle: 'Cambio'})
    }

    render(){
        return(
            <div>
                <h1 id="tituloCambia" class="margin">{this.state.newTitle}</h1>
                <p>Cambiar texto!!!</p>
                <button onClick={() => this.btclick()}>
                    Cambiar
                </button>
            </div>
        )
    }
}

export default Home

Edit new

Pruébalo en SandBox y observa su funcionamiento.

PD: Si bien no está mal aprender y usar la versión antigua de React que trabaja con componentes de clases, te aconsejo que le eches un vistazo a la ultima versión: React Hooks

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.