Cómo utilizar las variables dentro de las clases

El alcance de una variable puede ser diferente según la situación, pero esta palabra clave suele hacer referencia a un elemento de JavaScript en función del diferente alcance o contexto en el que se utiliza.

Por ejemplo, si consolas la palabra clave esto en el ámbito global, entonces serás capaz de conseguir el objeto vacío.

1console.log(this);

javascript

Pero si quieres usar las funcionalidades de JavaScript incorporadas o las funcionalidades basadas en el navegador, entonces se puede usar el objeto ventana.

1window.alert("esta es la alerta de prueba")

javascript

Lo mismo se aplica a una función que utiliza el alcance global.

12345constestaFunción=función(){retorno "Hola Mundo";}let msg =estaFunción()consola.log(msg)

jsx

En las clases de componentes de React, los métodos que se referirán a los atributos de la clase, tales como el atrezzo y el estado, pueden definirse en el contexto actual. Sin embargo, para los métodos de los componentes, se tiene acceso a this.state y this.props, y es necesario vincular el componente de React para este contexto a esos métodos.

Por ejemplo, digamos que tienes un formulario con el método de envío.

123456789101112131415161718192021222324252627282930313233importarReaccionar,{Componente}de "reaccionar";importar{ renderizar }de "reaccionar-dom";classAppextendsComponente{constructor(){super();esto. state={ name: "React",};// Binding methodthis.onFormSubmit=this.onFormSubmit.bind(this);}onFormSubmit(){console. log("Form Submitted");}render(){retorno(<div>div>form;};}entradatype="text"/;buttononClick={this. onFormSubmit};Submit</button;;/formform
jsx

Aquí en este ejemplo, el componente tiene un método llamado onFormSubmit(), pero fíjate en el constructor de la clase. El método está vinculado al contexto actual con el uso de la palabra clave "this".

Vinculando esta palabra clave al método de la clase se puede acceder a los props y al estado del componente con this.props and this.state.

Así que cuando intente acceder a cualquier accesorio después de la unión, utilice el valor de accesorio como se indica en el siguiente ejemplo.

123onFormSubmit(){console.log(this.props.formValues);}
jsx