使用TypeScript將事件處理程序作爲道具發送到React組件

Question

對於React組件，我有以下代碼。什麼是正確的方式來聲明傳入組件的兩個onClick處理程序？

interface LoginFormProps { 
    loginClicked: ???? <--- onClick handler signature 
    cancelClicked: ???? <--- onClick handler signature 
} 

class LoginForm extends React.Component<LoginFormProps, {}> { 
    render() { 
     <form> 
      <button onClick={loginClicked}> 
       Login 
      </button> 
      <button onClick={cancelClicked}> 
       Cancel 
      </button> 
     </form> 
    } 
} 

Answer 1

我通常使用：

interface ILoginFormProps { 
    loginClicked: (ev) => void; 
    // 
} 

但是，如果你想成爲真正嚴格的關於你的打字：

interface ILoginFormProps { 
    loginClicked: (ev: React.MouseEvent<HTMLButtonElement>) => void; 
    // 
}