在React中使用ES6语法不会绑定
this到用户定义的函数,但是会绑定
this到组件生命周期方法。
因此,您声明的函数不会与该类具有相同的上下文,并且尝试访问该函数
this不会给您期望的结果。
为了获得类的上下文,您必须将类的上下文绑定到该函数或使用箭头函数。
方法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" }); }}


