reactjs - React防止表单中的按钮在点击返回时被点击

Question

我有一个这样的登录组件：

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>
            );

        }
    }

当我在编辑电子邮件输入后按 Enter 键时，单击了忘记密码的按钮。

我希望提交表单。

onForgotPassword 函数如下所示：

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


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

标签： reactjs

Answer 1

找到解决方案：

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

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