Javascript reactjs编译错误'；e'；未定义在特定场景中没有未定义

我正在尝试使用不同的方式编写javascript函数，以便在文本框中记录用户输入。
以下代码工作正常：
选项1：（工作正常）

从“React”导入React；
类PlayMaster1扩展了React.Component{
手部组件（e）{
console.log（如target.value）；
}
render（）{
返回(
你好
)
}
}
导出默认PlayMaster1；

选项2（使用箭头功能可以正常工作）：

从“React”导入React；
类PlayMaster1扩展了React.Component{
手部组件（e）{
console.log（如target.value）；
}
render（）{
返回(
this.handleComponent（e）}/>
你好
)
}
}
导出默认PlayMaster1；

EDIT1:选项3不正确，删除了相同的选项

选项4-不起作用-

import React from "react";
class PlayMaster1 extends React.Component{

handleComponent(e){
    console.log(e.target.value);
}
render(){
    return(
        <div>
            <input type="text" onChange={this.handleComponent(e)}/>
            <h3>hello</h3>
        </div>

    )
}
}
export default PlayMaster1;

从“React”导入React；
类PlayMaster1扩展了React.Component{
手部组件（e）{
console.log（如target.value）；
}
render（）{
返回(
你好
)
}
}
导出默认PlayMaster1；

那么为什么选项4中没有定义“事件”？为什么这在所有其他情况下都是隐式可用的

onChange={this.handleComponent}

这意味着“将

This.handleComponent

传递到onChange属性中”。简单合法

onChange={(e) => this.handleComponent(e)}

这意味着“使用文本

（e）=>This.handleComponent（e）

创建一个新函数，并将其传递到onChange prop”。有点复杂，但这里的一切都很好

onChange={this.handleComponent(e)}

---

这意味着“立即调用

This.handleComponent

，传入

e

。无论handleComponent返回什么，都将其传递到onChange属性中”。渲染方法中没有名为

e

的变量，因此无法执行此操作。这也几乎肯定不是您想要做的，因为handleComponent看起来像是一个设计用于在更改事件发生时运行的函数，而不是在渲染发生时运行的函数。

#3和4是相同的，您是否错误地复制了#3？我的恶意软件将编辑并删除#3，并改写问题我仍然不清楚的是，为什么在选项1中，事件可用于被调用的函数而不进行传递，在选项2中，我们得到了事件的句柄，因此我认为类似地，该事件在选项4中也可以使用？

我仍然不清楚的是，为什么在选项1中，事件可以被调用函数使用，而不需要传递它

事件被传递，而不是由您传递。浏览器是最终调用函数的浏览器，当它这样做时，它将传入事件对象

因此我认为类似地，在第4项的选项4中也可以使用该事件，您可以自己调用该函数。您需要传递函数，而不是调用它，并让浏览器在事件发生时调用它。
onChange={(e) => this.handleComponent(e)}

onChange={this.handleComponent(e)}