比较来自世界各地的卖家的域名和 IT 服务价格

在哪里声明变量 react js

我正在尝试在课堂上声明一个变量 react-js. 该变量必须以各种功能提供。 这是我的代码。


class MyContainer extends Component {
constructor/props/ {
super/props/;
this.testVariable= "this is a test"; // I declare the variable here
}
onMove// {
console.log/this.testVariable/; //I try to access it here
}
}


在 onMove 价值
this.testVariable

不明确的。 我知道我可以向州施加一个值,但我不想这样做,因为每次值都会调用价值变化
render//

, 没有必要的。 我是新的反应,我做错了什么吗?
已邀请:

董宝中

赞同来自:

使用语法 ES6 在 React 没有绑定
this

对用户函数,但它将绑定
this

到组件生命周期的方法。

因此,您声明的函数不会与类具有相同的上下文,并尝试访问
this

不会给你你的期望。

要获取类上下文,必须将Class Context绑定到函数或使用箭头使用函数。

方法 1 有关上下文绑定:


class MyContainer extends Component {

constructor/props/ {
super/props/;
this.onMove = this.onMove.bind/this/;
this.testVarible= "this is a test";
}

onMove// {
console.log/this.testVarible/;
}
}


方法 2 有关上下文绑定:


class MyContainer extends Component {

constructor/props/ {
super/props/;
this.testVarible= "this is a test";
}

onMove = // => {
console.log/this.testVarible/;
}
}


方法2是我的首选方法

, 但是你可以选择自己的。

更新:

您还可以在没有设计人员的情况下创建类属性:


class MyContainer extends Component {

testVarible= "this is a test";

onMove = // => {
console.log/this.testVarible/;
}
}


笔记

. 如果您还要更新视图,则在安装或更改值时,请使用方法
state


setState

.

例子:


class MyContainer extends Component {

state = { testVarible: "this is a test" };

onMove = // => {
console.log/this.state.testVarible/;
this.setState/{ testVarible: "new value" }/;
}
}

奔跑吧少年

赞同来自:

假如说
onMove

是一个事件的处理册,很可能 , 他的上下文是别的东西
MyContainer

, IE
this

表示别的东西。

您可以在构建实例期间手动链接函数的上下文
Function.bind

:


class MyContainer extends Component {
constructor/props/ {
super/props/;

this.onMove = this.onMove.bind/this/;

this.test = "this is a test";
}

onMove// {
console.log/this.test/;
}
}


除了,

test !== testVariable


.

要回复问题请先登录注册