2

Llevo poco con React y todavía no comprendo bien cómo llamar a una función que reside en un componente padre.

Tengo dos componentes, un padre App.js y un hijo Login.js. Quiero que el hijo tenga un botón que llame a una función del padre.

¿Como puedo llamar a botonClick desde el hijo?

Componente padre:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.botonClick = this.botonClick.bind(this);
    this.state = {
      estadoLogin: true,
    };
  }

  botonClick(event) {
    let num = Math.floor(Math.random() * 10 + 1);
    if (num % 2 == 0) {
      this.setState({
        estadoLogin: false,
      });
    }
  }

  render() {
    return (
      <div>
        <Login />
      </div>
    );
  }
}

Componente hijo:

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.botonClick = this.botonClick.bind(this);
  }

  render() {
    return (
      <div className="cuadrado">
        <div className="formulario">
          <span class="cabecera">
            <h2>Bienvenido</h2>
          </span>
          <input
            placeholder="Usuario"
            class="input"
            ref={this.usuarioElement}
          />
          <br />
          <label>Password: </label>
          <input
            placeholder="contraseña"
            class="input"
            ref={this.passElement}
          />
          <button onClick={this.botonClick}>Entrar</button>
        </div>
      </div>
    );
  }
}

3 respuestas 3

4

Para pasar una función a un componente hijo, puedes hacerlo mediante props Si tu componente hijo es un componente Clase, puedes invocar una función utilizando this.props.nombreDeLafuncion

Si en cambio, tu componente hijo es un componente funcional debes suplementar a props como argumento del componente para poder acceder a ello, y luego usar props.nombreDeLafuncion:

class Hijo extends React.Component {

  render() {
    return (
      <button onClick={this.props.botonClick}>
        Boton del hijo clase
      </button>
    )
  }
}

function HijoFuncional (props) {
  return (
    <button onClick={props.botonClick}>
      Boton del hijo funcional
    </button>
  )
}


class Padre extends React.Component {
  constructor(props) {
    super(props)

    this.botonClick = this.botonClick.bind(this)
  }


  botonClick() {
    console.log('apretaste el boton!')
  }

  render() {
    return (
      <div>
        <h1>Como pasar props</h1>
        <Hijo botonClick={this.botonClick} />
        <HijoFuncional botonClick={this.botonClick}/>
      </div>
    )
  }
}




ReactDOM.render(<Padre/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2

Una manera de hacerlo es pasar el método del componente padre como una propiedad mas, es decir en tu componente padre tendrás algo así:

render() {
  return (
    <div>
      <Login onLogin={this.botonClick} />
    </div>
  );
}

Y luego simplemente en tu componente hijo lo recoges mediante las props.

render() {
  return (
    <div>
      <button onClick={this.props.onLogin}>Entrar</button>
    </div>
  );
}
0

al final hice eso. No conocía muy bien cual era la sintaxis exacta para hacerlo.

Padre:

botonClick(event){ 

}
    render(){
               return (
                 <div>
                    {this.state.estadoLogin ?
                      <Login botonClick={this.botonClick}  />:
                      <Vista2 />
                    }
                  </div>  
               );
      } 

Hijo:

 <button onClick={this.props.botonClick}>Entrar</button>    
1
  • Gracias a todos por contestar Commented el 13 oct. 2020 a las 8:27

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.