Aprenda a interactuar con eventos en una aplicación React
React proporciona una forma sencilla de gestionar eventos. Prepárate para despedirte deaddEventListener
.
En el artículo anterior sobre el Estado viste este ejemplo:
const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}
Si ha estado usando JavaScript durante un tiempo, esto es simplemente viejoControladores de eventos de JavaScript, excepto que esta vez está definiendo todo en JavaScript, no en su HTML, y está pasando una función, no una cadena.
Los nombres de los eventos reales son un poco diferentes porque en React usas camelCase para todo, así queonclick
se convierte enonClick
,onsubmit
se convierte enonSubmit
.
Como referencia, este es HTML de la vieja escuela con eventos JavaScript mezclados en:
<button onclick="handleChangeCurrency()">...</button>
Controladores de eventos
Es una convención tener controladores de eventos definidos como métodos en la clase Component:
class Converter extends React.Component {
handleChangeCurrency = event => {
this.setState({ currency: this.state.currency === '€' ? '