时间戳

首页 > 解决方案 > 如何自动点击提交按钮 - 反应

javascript - 如何自动点击提交按钮 - 反应

问题描述

我有一个手动输入用户名和密码的反应登录页面，

我希望提交按钮在页面加载时自动单击，以便自动登录用户。

这是我的代码。


export const LoginForm = () => {
    const history = useHistory();
    const classes = useStyles();
    const email = 'email@email.com';
    const password = 'mypassword';
    const [authStatus, setStatus] = useState(null);
    const [isSpinnerHidden, setSpinner] = useState(true);
    const { session } = useContext(SessionContext);

    const recaptchaRef = useRef();

    const _onSubmit = async (e) => {
        e.preventDefault();
        setSpinner(false);

        const authResult = await session.signIn(email, password);
        setSpinner(true);
        console.log(session);
        authResult ? setStatus(authResult) : history.push('/dashboard');

    };

    return (
        <form onSubmit={_onSubmit}>
            <Typography
                align='center'
                color='primary'
                variant="h4"
                style={{ marginBottom: '20px' }}
            >
                Sign In
            </Typography>
            {authStatus ?
                <Alert
                    severity="error"
                >
                    {authStatus}
                </Alert>
                :
                null
            }
            <TextField
                type='email'
                label="Email"
            />
            <TextField
                type='password'
                label="Password"
            />
            <Link
                onClick={() => history.push('/restore')}
                className={classes.restore}>
                Forgot password?
            </Link>

            
            <MuiButton
                text='Sign In'
                type='submit'
                value='login'
                isSpinnerHidden={isSpinnerHidden}
                className={classes.button}
            />
        </form>

        
    );
};

我可以在此代码中添加什么或进行更改以使其自动单击登录按钮并登录用户。

标签： javascripthtmlreactjs

解决方案

为了自动点击提交按钮，您需要使用onLoad

将您的 _onSubmit 转换为 Windows onload，类似这样

window.onload = async (e) => {
    e.preventDefault();
    setSpinner(false);
    console.log('hello');
    const authResult = await session.signIn(email, password);
    setSpinner(true);
    console.log(session);
    authResult ? setStatus(authResult) : history.push('/dashboard');

}

推荐阅读