reactjs - 使用 TypeScript 將事件處理器作為屬性傳入 React 組件
我有以下的 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>
}
}
答案#1
我通常使用:
interface ILoginFormProps {
loginClicked: (ev) => void;
//
}
但如果你想對你的打字非常嚴格的話:
interface ILoginFormProps {
loginClicked: (ev: React.MouseEvent<HTMLButtonElement>) => void;
//
}
