Saltar al contenido

manejo en caso reaccionar appsDec, 11thIn este tutorial, vamos a aprender sobre el manejo de eventos en reaccionar …

marzo 13, 2020

 

En este tutorial, vamos a aprender sobre el manejo de eventos en reaccionar y por ello también que unir esta palabra clave en reaccionar).

  • En JSX tenemos que envolver las expresiones de JavaScript con las llaves {}.
  • En JavaScript normales, utilizamos nombres en minúscula pero en reaccionar tenemos que utilizar nombres cameCase.

normal JavaScript

En reaccionar. de

Let aprender más acerca de cómo asociar controladores de eventos en los componentes funcionales de clase y la base. Los componentes funcionales

function Button(){

function handleClick(){ alert('some one clicked me') }
return (
)

}

En reaccionan necesitamos pasar la función de controlador de eventos como referencia.

argumentos para el traspaso

también puede pasar a los argumentos de las funciones de controlador de eventos. componentes basados ​​

function Button(){

function handleClick(name){
alert(name)
}

return (
)

}

Clase

class Counter extends React.Component {

constructor(props){
super(props);
this.state = {
num : 0
}
}

handleInc(){ this.setState({ num : this.state.num+1 }) }
render(){
return (

Counter

{this.state.num}

)
}
}

En componentes basados ​​en clases que necesitan unirse esta palabra clave para la clase de lo contrario esta palabra clave se enlaza con el objeto de ventana global o en modo estricto esto será indefinido.

Nos puede resolver este problema mediante el uso de funciones de dirección, porque en las funciones de dirección esta palabra clave será unido a su contexto de ejecución externa.

Más información sobre cómo funcionan las clases en JavaScript

Vamos a modificar el componente anterior mediante el uso de funciones de dirección.

class Counter extends React.Component {

constructor(props){
super(props);
this.state = {
num : 0
}
}

handleInc(){ this.setState({ num : this.state.num+1 }) }
render(){
return (

Counter

{this.state.num}

)
}
}

segunda forma utilizando public class campos de sintaxis. evento

class Counter extends React.Component {

constructor(props){
super(props);
this.state = {
num : 0
}
}

handleInc = () => { this.setState({ num : this.state.num+1 }) }
render(){
return (

Counter

{this.state.num}

)
}
}

objeto

también puede detener el comportamiento por defecto del navegador utilizando el objeto de evento.

function Link(){

function handleClick(e){
console.log(e);
e.preventDefault();
}

return (
Click me
)

}

Reaccionar eventos apoyado

  • portapapeles Eventos
  • Composición Eventos
  • teclado Eventos
  • Focus Eventos
  • Forma

  • Eventos
  • eventos de ratón
  • Pointer Eventos
  • Selección Eventos
  • Touch Eventos
  • interfaz de usuario Eventos
  • ruedas Eventos
  • Media Eventos
  • imagen Eventos
  • Animación Eventos
  • transición Eventos
  • otros acontecimientos