Eventos
Los eventos en React se manejan de manera similar a como lo haríamos con eventos en elementos DOM con ciertas salvedades:
- No se puede devolver false para evitar un comportamiento, por ejemplo de un click. Teneos que llamar de manera explícita a
preventDefault
- Las eventos se nombran usando camelCase
- Con JSX, pasa una función como controlador del evento, en lugar de una cadena.
- Cuando usamos clases de ES6, el contexto de
this
puede cambiar
<a href="#" onclick="alert('Has hecho click.'); return false;">
Pincha aquí
</a>
const Link = () => {
const handleClick(e) {
e.preventDefault();
console.log('Has hecho click.');
}
return (
<a href="#" onClick={handleClick}>
Pincha aquí
</a>
);
}
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
Ejercicio: Busca otras forma de que funcione el click sin usar bind (pista, hay dos).