Javascript React表单元素如何获取事件参数

我有这样一个表单组件：

从“React”导入React；
类CommentBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
}
this.handleSubmit=this.handleSubmit.bind（this）；
}
render（）{
返回(
消息
内容：
{this.handleChange（event）；}
value={this.state.value}
/>
提交
)
}
手变（活动）{
这是我的国家({
值：event.target.value
})
}
handleSubmit（事件）{
console.log（this.state.value）；
event.preventDefault（）；
}
}
导出默认注释框；

对于输入元素，我使用arrow函数绑定onChange事件，并传递

event

参数，以便在

handleChange

函数中获得

event

。如果我在

构造函数中使用
bind
方法绑定
this
，我发现我不需要传递
事件
参数，我也可以在
handleChange
函数中获得它。我想知道为什么在使用
bind
方法时不需要显式传递
event
参数？

使用
bind
方法绑定时，代码如下：

从“React”导入React；
类CommentBox扩展了React.Component{
建造师（道具）{
...
this.handleChange=this.handleChange.bind（this）；
...
}
render（）{
返回(
...
...
)
}
手变（活动）{
这是我的国家({
值：event.target.value
})
}
...
}
导出默认注释框；

PS：我忽略了与前一个相同的代码

还有一个问题。

我在
handleChange
方法中记录了一些值

handleChange（事件）{
console.log（'event'，event）；
日志（'event.target'，event.target）；
日志（'event.target.value'，event.target.value）；
这是我的国家({
值：event.target.value
})
}

但结果让我感到困惑。

第一个日志结果显示
event
的
target
的值为
null
，但第二个和第三个日志结果是它们都具有正确的值。所以我想知道这是否是因为
React
定义了
事件目标的
getter
方法
PS：对不起，实际上我想展示结果的图片，但我发现我没有10个声誉

这是我第一次在stackoverflow中提问，任何有帮助的回答都将不胜感激，谢谢
 您的问题的答案是，全局事件管理器在队列中为该事件执行回调时传递事件对象

Event是事件回调函数的第一个参数，因此无论是否绑定函数，注册的
onChange
都将以
Event
作为第一个参数调用。如果只是将引用传递给函数，它仍将使用事件对象调用。问题是，在执行函数时，对于
this.setState
，函数的
this
不相同

控制台/调试代码有问题，因为这两种情况都应该记录事件对象


绑定意味着调用上下文
this
将是您将其绑定到的上下文。Arrow函数也绑定了上下文。基本上-onChange将该函数添加到处理程序队列中，但窗口范围（或所有调用它们的内容）与类实例的上下文不同

在处理程序中，如果使用
this.setState
，则该函数不作为
窗口的一部分或任何React事件队列管理器的一部分存在

您还必须绑定特定参数，如
数据哪个字段
，或者每次
onChange={event=>this.handleChange（event，whichField）}都重新分配该函数

另一种选择是
handleChange=event=>{
而不是
handleChange（event）{
，默认情况下，它不会绑定
此
。
您的问题的答案是，全局事件管理器在该事件的队列中执行回调时传递事件对象

Event是事件回调函数的第一个参数，因此注册的
onChange
将以
Event
作为第一个参数进行调用，而不管您是否绑定函数。如果您只是将引用传递给函数，它仍将使用Event对象进行调用。问题是，当已执行，将不会为
this.setState
使用相同的
this

控制台/调试代码有问题，因为这两种情况都应该记录事件对象


Bind意味着调用上下文
this
将是您将其绑定到的上下文。Arrow函数也会绑定上下文。几乎-onChange会将该函数添加到处理程序队列中，但窗口范围（或所有调用它们的内容）与类实例的上下文不同

在处理程序中，如果使用
this.setState
，则该函数不作为
窗口的一部分或任何React事件队列管理器的一部分存在

您还必须绑定特定参数，如
数据哪个字段
，或者每次
onChange={event=>this.handleChange（event，whichField）}都重新分配该函数

另一种选择是
handleChange=event=>{
而不是
handleChange（event）{
，默认情况下，
不会绑定此