Блог

У меня есть такой компонент входа в систему :

 type Props = {
    onForgotPassword: (e: React.FormEvent<HTMLButtonElement>) => void;
};

    class Login extends React.Component<Props, State> {

        constructor(props: Props) {
            super(props);
        }

        handleSubmit(e: React.FormEvent<HTMLFormElement>) {
            e.preventDefault();
            ...
        }

        render() {
            return (
                <div
                >
                    <Form
                        onSubmit={this.handleSubmit}
                        layout="vertical"
                    >
                                <input
                                    type="email"
                                />
                                <button
                                    type="button"
                                    onClick={this.props.onForgotPassword}
                                >
                                    Forgot password ?
                                </button>
                            <button
                                type="submit"
                            >
                                         <span>Submit</span>
                            </button>
                    </Form>
                </div>
            );

        }
    }
 

И когда я нажимаю «Ввод» после редактирования ввода электронной почты, нажимается кнопка «Забыли пароль».

Я хочу, чтобы вместо этого была отправлена форма.

Функция onForgotPassword выглядит следующим образом :

 const changeForm = (v: AuthForm) => (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setForm(v);
};


<Login onForgotPassord={changeForm(Form.ForgotPassword)} />
 

Нашел решение :

 type Props = {
    onForgotPassword: (e: React.FormEvent<HTMLButtonElement> | React.KeyboardEvent) => void;
};

const changeForm = (v: AuthForm) => (e: React.FormEvent<HTMLButtonElement> | React.KeyboardEvent) => {
    if(e instanceof KeyboardEvent amp;amp; e.key === 'Enter'){ 
        return;
    }
    setForm(v);
};