Question 49582 in Javascript Question posted in
A very good W3school tutorial can be found here.

console.logs in onClick handleSubmit do not print out – Javascript

There is a login component in React 18.x front end to take input of username and password, and then send them to backend server for verification. If verified, then route to a path defined with react-route-dom. The browser is Chrome. Here is the login component:

export default function ELogin () {
    console.log("from Elogin11");  //<<==show up in Chrome's console 
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const authVal = useContext(authContext);

    const handleSubmit = async (event) => { 
        console.log("from Elogin handleSubmit : ", event); //<<==NO show 
        let url = `${GLOBAL.BASE_URL}/logins?password=${encodeURIComponent(password)}&loginName=${encodeURIComponent(loginName)}`
        //let url = `${GLOBAL.BASE_URL}/express_backend`
        let obj = {
            username:loginName,
            password:password
        };
        try {
            let employee = await helper.fetchpost(url, obj); //<<==fetch show up on backend node/express server
            console.log("fire up from react browser", employee); //<<==NO show 
            authVal.setEmpUser(employee.results);             
            //redirect
            return <Navigate to="/employee" />;
        } catch(err) {
            console.log("Error in login", err);
        };
       
    };

    const handleLoginName = (event) => {
        setLoginName(event.target.value);
    };

    const handlePassword = (event) => {
        console.log("handle password : ", event.target);  //<<==show up in Chrome's console 
        setPassword(event.target.value);
    };
    console.log("before return Elogin");  //<<==show up in Chrome's console 
    return (
        <React.Fragment>
            <Row>
            <Col sm={true}></Col>
            <Col sm={true}>
                <Form >
                    <h3 className="text-center" >Login Page</h3>

                    <div className="form-group">
                        
                        <input type="text" className="form-control"  placeholder="登录名" onChange={handleLoginName} />
                    </div>

                    <div className="form-group">
                        
                        <input type="password" className="form-control"  placeholder="密码" onChange={handlePassword} />
                    </div>

                    <Button onClick={()=>{console.log("button clicked") //<<==NO show; handleSubmit()}} type="submit" className="btn btn-primary btn-block" >Login</Button>
                
                </Form>
                </Col>
                <Col sm={true}></Col>
            </Row>
        </React.Fragment>
    );
}

However none of the console.log in handleSubmit gets printed in Chrome’s console, and Navigate seems not fired as well.

UPDATE: Here is the current console output which is not showing console log inside of handleSubmit:

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
ELogin.js:12 from Elogin11
ELogin.js:45 before return Elogin
localhost/:1 [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: h-t-t-p-s:/-/goo.gl/9p2vKq) <input type=​"password" class=​"form-control" placeholder=​"密码">​
Tags:

2

Answers


  1. 0

    seems like the onSubmit={() => {} } on the form component is preventing that code from executing, please verify if it works after removing onSubmit

    Login or Signup to reply.
  2. 0 
        export default function ELogin () {
    console.log("from Elogin11");  //<<==show up in Chrome's console 
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const authVal = useContext(authContext);

    const handleSubmit = async (event) => { 
        event.preventDefault();
            console.log("from Elogin handleSubmit : ", event); //<<==NO show 
            let url = `${GLOBAL.BASE_URL}/logins?password=${encodeURIComponent(password)}&loginName=${encodeURIComponent(loginName)}`
            //let url = `${GLOBAL.BASE_URL}/express_backend`
            let obj = {
                    username:loginName,
                    password:password
            };
            try {
                    let employee = await helper.fetchpost(url, obj); //<<==fetch show up on backend node/express server
                    console.log("fire up from react browser", employee); //<<==NO show 
                    authVal.setEmpUser(employee.results);             
                    //redirect
                    return <Navigate to="/employee" />;
            } catch(err) {
                    console.log("Error in login", err);
            };
         
    };

    const handleLoginName = (event) => {
            setLoginName(event.target.value);
    };

    const handlePassword = (event) => {
            console.log("handle password : ", event.target);  //<<==show up in Chrome's console 
            setPassword(event.target.value);
    };
    console.log("before return Elogin");  //<<==show up in Chrome's console 
    return (
            <React.Fragment>
                    <Row>
                    <Col sm={true}></Col>
                    <Col sm={true}>
                            <Form onSubmit={handleSubmit}>
                                    <h3 className="text-center" >Login Page</h3>

                                    <div className="form-group">
                                            
                                            <input type="text" className="form-control"  placeholder="登录名" onChange={handleLoginName} />
                                    </div>

                                    <div className="form-group">
                                            
                                            <input type="password" className="form-control"  placeholder="密码" onChange={handlePassword} />
                                    </div>

                                    <Button  type="submit" className="btn btn-primary btn-block" >Login</Button>
                            
                            </Form>
                            </Col>
                            <Col sm={true}></Col>
                    </Row>
            </React.Fragment>
    );
}

    This will work, The issues in the code you posted I feel,

    1. You are using two event listeners for the same submit event ( one from submit button & other from form’s onSubmit attribute), In that case you need to be careful about the order of execution.
    2. The submitHandler is not preventing the form’s default behavior (which is refreshing the page), That’s we we are unable to see the consoles from submitHandler. To avoid this we need to call preventDefault function on the received event
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search