0

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

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

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

4

2 回答 2

1

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

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

然后传递它的参考：

onChange={this._onChangeCompactMode}

他们应该工作相同

于 2021-01-07T09:34:01.697 回答
0

问题是因为类型不匹配。查看切换文档

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

于 2021-01-07T09:32:03.190 回答