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

【问题标题】：React prevent button in form to be clicked on hitting returnReact防止表单中的按钮在点击返回时被点击
【发布时间】：2021-05-31 22:39:38
【问题描述】：

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

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

【问题讨论】：

标签： reactjs

【解决方案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);
};

【讨论】：