我试图在react-js类中声明一个变量.变量应该可以在不同的函数中访问.这是我的代码
class MyContainer extends Component {
constructor(props) {
super(props);
this.testVarible= "this is a test"; // I declare the variable here
}
onMove() {
console.log(this.testVarible); //I try to access it here
}
}
在onMove上,this.test的值未定义.我知道我可以将值放在状态上,但我不想这样做,因为每次值改变时,都会调用render(),这是不必要的.我是新手做出反应,我做错了什么？
解决方法
在React中使用ES6语法不会将此绑定到用户定义的函数,但是它会将此绑定到组件生命周期方法.
因此,您声明的函数将不具有与该类相同的上下文并尝试访问它将无法满足您的期望.
方法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" });
}
}
