0

Tengo una consulta: estoy trabajando con React (clases) y necesito que un button ejecute una funcion al cargar el mismo en el DOM, y no tener que hacerle un click.

Alguien me podria ayudar con un ejemplo? Muchas gracias a todos!

import React, { Component } from "react"; 
class Ejemplo extends Component {
    constructor(props) {
        super(props);
        this.funcion = this.funcion.bind(this);
    }

    funcion(){
        console.log("Hola") 
    }

    render(){
        return(
            <button onClick={this.funcion}>Example</button>
        );
    }
}

export default Ejemplo
2
  • Puedes mostrar parte de tu codigo? estas trabajando con Clases o con hooks? si es lo segundo puedes hacerlo con useEffect Commented el 26 nov. 2020 a las 15:59
  • Estoy trabajando con clases! Aqui muestro código. Lo agregare a mi pregunta import React, { Component } from "react"; class Ejemplo extends Component { constructor(props){ super(props); this.funcion = this.funcion.bind(this); } funcion(){ console.log("Hola") } render(){ return( <button onClick={this.funcion}>Example</button> ); } } export default Ejemplo Commented el 26 nov. 2020 a las 16:09

1 respuesta 1

1

La forma segun la documentación de react es usar componentDidMount de React. Tu código quedaría algo así:

import React, { Component } from 'react';
class Ejemplo extends Component {
    constructor(props) {
        super(props);

        this.funcion = this.funcion.bind(this);
    }
    
    componentDidMount() { //<----------------------------
        this.funcion();
    }

    funcion () {
        console.log('Hola');
    }

    render() {
        return <button onClick={this.funcion}>Example</button>;
    }

}

Lo que hace componentDidMount es que esta función se ejecuta una vez que el componente es unido al árbol de react con todos los componentes. Tambien existe la funcion componentDidUpdate el cual se llama cada vez que el componente es rendereado

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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