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

Question

I have a react login page with username and password manually inputted,

I want the submit button to automatically click upon page load so it will automatically log in users.

Here is my code.

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>

        
    );
};

what can I add to this code or change that will make it click on the sign-in button automatically and login the user.

Answer 1

I don't think clicking the button automatically is the best experience you can have here.

The better way of doing that here would be to conditionally choose the route based on authentication state before you even render the login screen. Something like this:

if (isAuthenticated){
  history.push('/dashboard);
} else {
  history.push('/login');
}

If for whatever reason you NEED to do it your way, just call your signin function when the components mounts with useEffect

import React, {useEffect} from 'react';
export const LoginForm = () => {
    
    ...
  useEffect(() => {
    if(isAuthenticated){ // You'll need to get the auth state from somewhere here
     history.push('/dashboard')
     }
  },[])

    return (
     ...
       
    );
};

Answer 2

In order to automatically click on the submit button, you need to use an onLoad

convert your _onSubmit to a windows onload, something like this

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

}