OnClick Javascript function 在 Z3C797270102480CB4D1207D1E1D07A3 中不工作

Question

I have a login page and below shown the jsx of my login page.Login submit button is inside here.on clicking this login button nothin is triggered or no change reflected

 const SectionLogin = ({ onLoginClick, setEmail, setPassword }) => {


  return (
    <>
      <div
        className='wrapper'
        style={{
          backgroundImage: 'url(' + require('app/assets/img/j.jpg') + ')',
        }}
      >
        <Container>
          <Row>
            <Col
              className='mx-auto'
              lg='4'
              md='6'
              style={{ paddingTop: '60px' }}
            >
              <Card className='card-register' style={{ padding: '15px' }}>
                <h3 className='title mx-auto'>Welcome</h3>
                <div className='social-line text-center'>
                  <Button
                    className='btn-neutral btn-just-icon mt-0'
                    color='facebook'
                    // onClick={(e) => e.preventDefault()}
                  >
                    <i
                      className='fab fa-facebook fa-3x'
                      style={{ color: '#3b5998' }}
                    />
                  </Button>
                  <Button
                    className='btn-neutral btn-just-icon mt-0 ml-1'
                    color='google'
                    // onClick={(e) => e.preventDefault()}
                  >
                    <i
                      className='fab fa-google-plus fa-3x'
                      style={{ color: '#db4a39' }}
                    />
                  </Button>
                  <Button
                    className='btn-neutral btn-just-icon mt-0 ml-1'
                    color='twitter'
                    // onClick={(e) => e.preventDefault()}
                  >
                    <i
                      className='fab fa-twitter fa-3x'
                      style={{ color: '#00acee' }}
                    />
                  </Button>
                </div>
                <Form className='register-form'>
                  <label>Email</label>
                  <InputGroup className='form-group-no-border'>
                    <InputGroupAddon addonType='prepend'>
                      <InputGroupText>
                        <i className='nc-icon nc-email-85' />
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input
                      placeholder='Email'
                      type='email'
                      // onChange={(e) => setEmail(e.target.value)}
                    />
                  </InputGroup>
                  <label>Password</label>
                  <InputGroup className='form-group-no-border'>
                    <InputGroupAddon addonType='prepend'>
                      <InputGroupText>
                        <i className='nc-icon nc-key-25' />
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input
                      placeholder='Password'
                      type='password'
                      // onChange={(e) => setPassword(e.target.value)}
                    />
                  </InputGroup>
                  <Button
                    block
                    className='btn-round'
                    color='warning'
                    type='button'
                     onClick={onLoginClick}
                  >
                    Login
                  </Button>
                </Form>

                <div className='forgot'>
                  <Button
                    className='btn-link'
                    color='secondary'
                    // onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
              <div className='col text-center'>
                {/* <Button
                    className='btn-round'
                    outline
                    color='neutral'
                    href='/register-page'
                    size='lg'
                    target='_blank'
                  >
                    View Register Page
                  </Button> */}
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default SectionLogin;

button code is inside this SectionLogin Container(inside return where my login page jsx reside)

import React, { useEffect, useCallback, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import SectionLogin from './LoginPage';


const LoginContainer = () => {


  const dispatch = useDispatch();

  const onLoginClick = (e) => {
    console.log('hereeee');
    alert('Hello');
  };

  return (
    <>
      <div className='content'>
        <SectionLogin
          onLoginClick={onLoginClick}
        />
      </div>
    </>
  );
};
export default LoginContainer;

onLoginClick function is not triggering when button is clicked.

Answer 1

Can you try this,

  <Button 
    block
    className="btn-round"
    color="warning"
    type="button"
    onClick={(event)=>onLoginClick(event)}>
     Login
  </Button>;

Hope this helps!!

Answer 2

Pass your onClick function as onLoginClick

<div className='content'>
    <SectionLogin
        onLoginClick={onLoginClick}
    />
</div>

And use it as

<Button
   block
   className="btn-round"
   color="warning"
   type="button"
   onClick={() => onLoginClick() }
>
   Login
</Button>;