使用作为道具传递的函数对打字稿做出反应，但无法访问

Question

我正在用 react + typescript 制作一个简单的切换按钮。 我想通过将函数作为道具传递给子组件来练习一些复杂的功能。 我记得“this.props”允许我访问在打字稿中传递给孩子的所有道具。 因此，如果我在父级中定义一个函数，我应该能够在子级中调用该函数，对吧？

但我得到了以下错误。 有人可以帮帮我吗？ 谢谢你。

错误：

(属性) React.DOMAttributes.onClick?: React.MouseEventHandler | undefined Type '(checked: boolean) => void' 不可分配给类型'MouseEventHandler'。 'checked' 和 'event' 的参数类型不兼容。 类型 'MouseEvent' 不可分配给类型 'boolean'.ts(2322)

代码：

源/

import React from 'react';
import ReactDOM from 'react-dom';
import Switch from './Switch';

interface State {
  buttonOn: boolean;
}

class App extends React.PureComponent<{}, State> {
  public state: State = {
    buttonOn: false,
  };

  onChange = (checked: boolean) => this.setState({ buttonOn: checked });

  render() {
    return (
      <div>
        <Switch
          checked={this.state.buttonOn}
          onChange={(checked) => this.onChange(!checked)}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app')!);

源/开关/

import React from 'react';
import './index.css';

interface Props {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

export default class Switch extends React.PureComponent<Props> {
  render() {
    return (
      <div>
        <div onClick={this.props.onChange} /> {/* error here */}
      </div>
    );
  }
}

Answer 1

所以你有两个选择......要么

1. 在onClick lambda 函数返回this.props.onChange的地方这样做。 如果你愿意，你也可以用花括号把它包起来

export default class Switch extends React.PureComponent<Props> {
  render() {
    return (
      <div>
        <div onClick={(e) => this.props.onChange} /> {/* error here */}
      </div>
    );
  }
}

或者;

2. 更改您的类型...始终值得将鼠标悬停在诸如onClick之类的属性上，以了解函数签名以及传入的参数类型。

# src/App.tsx
import React from "react";
import Switch from "./Switch";

interface State {
  buttonOn: boolean;
}

class App extends React.PureComponent<{}, State> {
  public state: State = {
    buttonOn: false
  };

  onChange = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(event);
  };

  render() {
    return (
      <div>
        <Switch checked={this.state.buttonOn} onChange={this.onChange} />
      </div>
    );
  }
}

export default App;

然后在交换机中：

# src/Switch.tsx

import React from "react";

interface Props {
  checked: boolean;
  onChange: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  disabled?: boolean;
}

export default class Switch extends React.PureComponent<Props> {
  render() {
    return (
      <div>
        <button onClick={this.props.onChange}> Hello world </button>
      </div>
    );
  }
}

我在这里写了一个 Codesandbox 操场，所以你可以自己测试一下。