Reactjs 我们为什么要加上“不”；（）=>&引用；在函数引用之前？

我正在学习typescript，并试图从Microsoft Fluent UI实现一个组件，但遇到了一些问题：

Type '(ev: React.MouseEvent<HTMLElement>, checked: boolean) => void' is not assignable to type '(event: MouseEvent<HTMLElement, MouseEvent>, checked?: boolean | undefined) => void'.

Type'（ev:React.MouseEvent，选中：布尔）=>void'不可分配给Type'（事件：MouseEvent，选中？：布尔|未定义）=>void'。

在代码中，单击切换按钮时，会引用一个名为_onchangecomptommode的函数

  private _onChangeCompactMode = (ev: React.MouseEvent<HTMLElement>, checked: boolean): void => {
this.setState({ isCompactMode: checked });

private\u onChangeCompactMode=（ev:React.MouseEvent，选中：boolean）：void=>{
this.setState（{isCompactMode:checked}）；

这里是它的参考位置：

  <Fabric>
    <div className={classNames.controlWrapper}>
      <Toggle
        label="Enable compact mode"
        checked={isCompactMode}
        onChange={this._onChangeCompactMode}
        onText="Compact"
        offText="Normal"
        styles={controlStyles}
      />
       ...
  </Fabric>

...

我通过将此行

onChange={this.\u onchangecomptommode}

更改为this

onChange={（）=>this.\u onchangecomptommode}

我不知道为什么会这样。我的理解是，我传递了一个函数引用。但是如果没有

（）=>

---

这里还是新的，所以欢迎有建设性的反馈。

问题在于类型不匹配。请查看

onChange

具有以下类型：

（事件：React.MouseEvent，选中？：布尔）=>void

请注意，选中的

是可选的，但在您的实现中不是。如果您将其设置为可选，则它应该可以工作：

private\u onChangeCompactMode=（ev:React.MouseEvent，选中？：布尔）：void=>{
this.setState（{isCompactMode:checked？？false}）；

---

确保现在添加一个默认值，即选中是可选的，就像我使用

checked？？false

时所做的那样，您必须小心JSX回调中

this

的含义。如果您忘记绑定

this.\u onChangeCompactMode和

将其传递给onChange，那么在实际调用函数时，这将是未定义的。这就是为什么您必须像以前一样使用

箭头函数

。或者

\onChangeCompactMode

本身必须是箭头函数，如下所示：

  _onChangeCompactMode = () => {
    // your code
  }

然后通过其参考：

onChange={this._onChangeCompactMode}

它们应该是一样的