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>
);
}
}