javascript - OnClick Javascript函数在reactjs中不起作用

Question

我有一个登录页面，下面显示了我的登录页面的 jsx。登录提交按钮在此处。单击此登录按钮时，不会触发任何更改或没有反映任何更改

 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;

按钮代码在此 SectionLogin 容器内（在我的登录页面 jsx 所在的返回内）

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 函数。

标签： javascriptreactjsreact-hooks

Answer 1

你可以试试这个，

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

希望这可以帮助！！