时间戳

首页 > 解决方案 > 为什么我们在函数引用之前添加“ ( ) => ”？

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

问题描述

我正在学习打字稿，并试图从 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}

我不确定为什么这使它起作用。我的理解是，我传递了一个函数引用。但是为什么它不能按原样工作() =>

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

标签： reactjstypescriptfluent-ui

解决方案

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

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

然后传递它的参考：

onChange={this._onChangeCompactMode}

他们应该工作相同

推荐阅读