Javascript 如何在react组件中为内部函数声明变量？

当我试图在我的类函数中使用变量时，得到了这个错误

无法读取未定义的属性“zoomInIndex”

如果我有一个函数就可以了，有人能帮我解决如何在内部函数中使用变量或者如何绑定内部函数上下文吗

类MyContainer扩展组件{
建造师（道具）{
超级（道具）；
this.testClick=this.testClick.bind（this）；
this.zoomClick=this.zoomClick.bind（this）；
this.testVariable=“这是一个测试”；
}
zoomClick（输入输出）{
返回函数（e）{
console.log（this.testVariable）；//这不起作用
}
}
testClick（）{
console.log（this.testVariable）；
}
}

您需要绑定从

zoomClick（）返回的
函数
：

zoomClick（inout）{
返回函数（e）{
console.log（this.testVariable）；//这不起作用
}.bind（this）；//您可以通过以下两种方式之一将其绑定到类上下文：

returnFunction=returnFunction.bind（this）；
或
function（）{}.bind（this）


class MyContainer.Component{
建造师（道具）{
超级（道具）；
this.testClick=this.testClick.bind（this）；
this.zoomClick=this.zoomClick.bind（this）；
this.testVarible=“这是一个测试”；
}
zoomClick（输入输出）{
设返回函数=函数（e）{
console.log（this.testVariable）；
返回这个.testVariable；
};
returnFunction=returnFunction.bind（这个）；
返回函数；
}
testClick（）{
console.log（this.testVariable）；
}
render（）{
返回(
{this.zoomClick（false）（false）}
);
}
}
ReactDOM.render(
,
document.getElementById（“react”）
)；


我不想在react组件中使用胖箭头函数，因为我的Web包配置遇到了很多问题

我猜您试图在Babel插件中使用类字段，这给您带来了一些麻烦

在构造函数中使用传统的绑定方法，在代码的其他地方使用箭头函数，而不会遇到这些问题


class MyContainer.Component{
建造师（道具）{
超级（道具）；
this.zoomClick=this.zoomClick.bind（this）；
this.testVarible=“这是一个测试”；
}
zoomClick（）{
返回（e）=>{
console.log（this.testVariable）；
}
}
render（）{
返回
}
}
功能按钮（{handleClick}）{
返回单击
}
ReactDOM.render(
,
document.getElementById（'容器'）
)；

.bind
在这种情况下，甚至不需要在构造函数中使用
zoomClick
。如果不在其他地方传递函数，则不需要使用
。bind
。仅在需要时绑定函数。
zoomClick(inout) {
    return function(e) {
        console.log(this.testVarible); // this is not working
    }.bind(this); // <-- bind(this)
}