網站搜尋

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;
    //
}