如何将两个 onClick 参数传递给反应中的一个函数

Question

我有一个名为 Test 的函数，我想将两个 onClick 引用传递给它。

const Test = ({ onConnect }:{ onConnect:any }, { onDisconnect }:{ onDisconnect:any }) => {
  return (
    <div>
      <DrawDiagram />
      <button onClick={onConnect}>Connect</button>
      <button onClick={onDisconnect}>Connect</button>
    </div>
  );
};

当我想用下面的代码调用它时

  <Test 
  onConnect={() => sendEvent("CONNECT")} 
  onDisconnect={() => sendEvent("DISCONNECT")} 
  />;

它抱怨此错误消息

(JSX attribute) onDisconnect: () => void
Type '{ onConnect: () => void; onDisconnect: () => void; }' is not assignable to type 'IntrinsicAttributes & { onConnect: any; }'.
  Property 'onDisconnect' does not exist on type 'IntrinsicAttributes & { onConnect: any; }'.ts(2322)

看来我没有正确调用函数。我该怎么做？

谢谢，

Answer 1

您当前的组件编写为好像道具将作为单独的参数传递一样。但是，所有 props 都组合成一个参数。这是正确的做法：

interface TestProps {
  onConnect: () => void;
  onDisconnect: () => void;
}

const Test = ({ onConnect, onDisconnect }: TestProps) => {

如何将两个 onClick 参数传递给反应中的一个函数

How to pass two onClick parameters to one function in react

onclick

typescript

reactjs