使用作為道具傳遞的函數對打字稿做出反應，但無法訪問

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 操場，所以你可以自己測試一下。