为什么我们在函数引用之前添加“ ( ) => ”？

Question

我正在学习打字稿，并试图从 Microsoft Fluent UI 实现一个 detailList 组件，但我运行遇到了一些麻烦：

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

在代码中有一个名为 _onChangeCompactMode 的函数在单击切换按钮时被引用

  private _onChangeCompactMode = (ev: React.MouseEvent<HTMLElement>, checked: 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._onChangeCompactMode} 更改为此 onChange={() => this._onChangeCompactMode}

来解决此问题

我不确定为什么会这样。我的理解是，我传递了一个函数引用。但是，如果没有 () =>

，它为什么不能正常工作呢？

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

Answer 1

问题是因为类型不匹配。看看 toggle documentation

onChange 具有类型：

(event: React.MouseEvent<HTMLElement>, checked?: boolean) => void

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

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

现在确保添加一个默认值，因为选中是可选的，就像我对 checked ?? false

所做的那样

Answer 2

你必须注意 JSX 回调中 this 的含义。如果忘记绑定 this._onChangeCompactModeand 将其传递给 onChange，则在实际调用该函数时将未定义。这就是为什么您必须像以前一样使用 arrow function。或者 _onChangeCompactMode 本身必须是一个箭头函数，像这样：

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

然后传递它的引用：

onChange={this._onChangeCompactMode}

它们的工作原理应该相同

为什么我们在函数引用之前添加“ ( ) => ”？

Why do we add " ( ) => " before a function reference?

typescript

reactjs

fluent-ui