Кнопка страницы входа в систему React

Это полный код моей страницы входа. Он основан на реактивном шаблоне.

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { LoginFooter } from 'containers/LoginFooter';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectLoginPage, { makeSelectUsername, makeSelectPassword, makeSelectUserInfo, makeSelectSetErrMessage } from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import { InputText } from 'primereact/components/inputtext/InputText';
import { changePassword, changeUsername, submitForm, getErrMessage } from './actions';
import { Button } from 'primereact/components/button/Button';
import { Growl } from 'primereact/components/growl/Growl';
import { Panel } from 'primereact/components/panel/Panel';

export class LoginPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentDidUpdate() {
    this.props.changeMessage('');
  }

  render() {
    if (this.props.setErrMessage) {
      let msg = { severity: 'error', summary: 'Failure', detail: this.props.setErrMessage };
      this.growl.show(msg);
    }
    return (
      <div>
        {/* <Helmet>
          <meta name = "description" content = "Description of LoginPage" />
        </Helmet> */}
        <div className='ui-g ui-fluid login-img'>
          <div className='ui-g-8 ui-sm-1 ui-md-3 ui-lg-7'>
          </div>

          <div className='ui-g-4 ui-sm-10 ui-md-6 ui-lg-4 loginpanelbar' style = {{ marginLeft: '20px', marginTop: '28px', marginBottom: '13px' }}>
            <Panel className='panellogin' style = {{ paddingTop: '50px', paddingBottom: '50px' }}>
              <div className='ui-g ui-fluid' >
                <div className='ui-g-2 ui-sm-3 ui-md-2 ui-lg-2'>
                </div>
                <div className='ui-g-8 ui-sm-12 ui-md-8 ui-lg-8'>
                  <div className='logoimg' style = {{ height: '80px' }}>
                  </div>
                </div>
                <div className='ui-g-2 ui-sm-3 ui-md-2 ui-lg-2'>
                </div>
              </div>
              <div className='ui-g ui-fluid'>
                <div className='ui-g-12 ui-sm-12 ui-md-12 ui-lg-12'>
                  <label for = "name">Username</label>
                  <span class = "md-inputfield" style = {{ marginBottom: '20px', marginTop: '10px' }}>
                    <InputText id = "netiinputfield1" style = {{ height: '37px' }} type = "text" value = {this.props.username} onChange = {(e) => { this.props.onChangeUsername(e.target.value) }} required class = " ui-state-default ui-corner-all ui-widget" />
                  </span>
                </div>
              </div>
              <div className='ui-g ui-fluid'>
                <div className='ui-g-12 ui-sm-12 ui-md-12 ui-lg-12'>
                  <label for = "name">Password</label>
                  <span class = "md-inputfield" style = {{ marginBottom: '20px', marginTop: '10px' }}>
                    <InputText id = "netiinputfield2" style = {{ height: '37px' }} type = "password" value = {this.props.password} onChange = {(e) => { this.props.onChangePassword(e.target.value) }} required class = "ui-state-default ui-corner-all ui-widget" />
                  </span>
                </div>
              </div>
              <div className='shortFont'>
                <div className='ui-g ui-fluid'>
                  <div class='ui-g-12 ui-sm-6 ui-md-6 ui-lg-6'>
                    <div class = "form-check" >
                      <input type = "checkbox" className = "form-check-input exampleCheck1" className='checkboxsize' />
                      <label class = "form-check-label" for = "exampleCheck1">Remember Me</label>
                    </div>
                  </div>
                  <div class='ui-g-12 ui-sm-6 ui-md-6 ui-lg-6' style = {{ textAlign: 'right' }}>
                    <a href='#/'>Forget Password?</a>
                  </div>
                </div>
              </div>
              <div className='ui-g ui-fluid' style = {{ marginBottom: '13px' }}>
                <div class = "ui-g-12">
                  <Growl ref = {(el) => this.growl = el} />
                  <Button label='LOGIN' onClick = {this.props.submitLoginForm} />
                </div>
              </div>
            </Panel>
          </div>
          <div className='ui-g-1 ui-sm-1 ui-md-1 ui-lg-1'>
          </div>
        </div>
        <div className = "login-img-footer">
          <div class = "textcss"><p>START WITH DIGITAL</p></div>
        </div>
        <div className = "ui-g ui-fluid bottomPart"></div>
        {/* <LoginFooter /> */}
      </div>
    );
  }
}

LoginPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  username: PropTypes.any,
  onChangeUsername: PropTypes.func,
  password: PropTypes.any,
  onChangePassword: PropTypes.func,
  submitLoginForm: PropTypes.func,
  userInfo: PropTypes.any,
  changeMessage: PropTypes.any,
  setErrMessage: PropTypes.any,
};

const mapStateToProps = createStructuredSelector({
  loginpage: makeSelectLoginPage(),
  username: makeSelectUsername(),
  password: makeSelectPassword(),
  userInfo: makeSelectUserInfo(),
  setErrMessage: makeSelectSetErrMessage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onChangeUsername: (value) => {
      dispatch(changeUsername(value));
    },
    onChangePassword: (value) => {
      dispatch(changePassword(value));
    },
    submitLoginForm: (evt) => {
      dispatch(submitForm());
    },
    changeMessage: (evt) => {
      dispatch(getErrMessage(evt));
    }
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'loginPage', reducer });
const withSaga = injectSaga({ key: 'loginPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(LoginPage);

Кнопка отправки работает с щелчком мыши, но мне также нужна клавиша Enter (клавиша = 13), чтобы отправить форму.

Я опробовал несколько методов, но ни один из них не сработал. Как я могу это сделать вместе с onClick и Enter Key.

прочтите это: stackoverflow.com/questions/27827234/…

Tim Ogilvy 24.06.2018 10:19

Вы можете использовать тег формы, чтобы обернуть поля ввода и добавить к нему свойство onsubmit, например <form onSubmit = {this.yourSubmitbuttonHandler}>, и добавить <button type = 'submit'> и удалить обработчик onclick с кнопки. проверьте ссылку stackoverflow.com/questions/33211672/… с принятым ответом

Rahil Ahmad 25.06.2018 11:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
1 154
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете просто обернуть поля формы тегом и прослушать на нем событие onSubmit:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { LoginFooter } from 'containers/LoginFooter';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectLoginPage, { makeSelectUsername, makeSelectPassword, makeSelectUserInfo, makeSelectSetErrMessage } from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import { InputText } from 'primereact/components/inputtext/InputText';
import { changePassword, changeUsername, submitForm, getErrMessage } from './actions';
import { Button } from 'primereact/components/button/Button';
import { Growl } from 'primereact/components/growl/Growl';
import { Panel } from 'primereact/components/panel/Panel';

export class LoginPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentDidUpdate() {
    this.props.changeMessage('');
  }

  render() {
    if (this.props.setErrMessage) {
      let msg = { severity: 'error', summary: 'Failure', detail: this.props.setErrMessage };
      this.growl.show(msg);
    }
    return (
      <div>
        {/* <Helmet>
          <meta name = "description" content = "Description of LoginPage" />
        </Helmet> */}
        <div className='ui-g ui-fluid login-img'>
          <div className='ui-g-8 ui-sm-1 ui-md-3 ui-lg-7'>
          </div>

          <div className='ui-g-4 ui-sm-10 ui-md-6 ui-lg-4 loginpanelbar' style = {{ marginLeft: '20px', marginTop: '28px', marginBottom: '13px' }}>
            <Panel className='panellogin' style = {{ paddingTop: '50px', paddingBottom: '50px' }}>
            
            <form onSubmit = {this.props.submitLoginForm}>
            
              <div className='ui-g ui-fluid' >
                <div className='ui-g-2 ui-sm-3 ui-md-2 ui-lg-2'>
                </div>
                <div className='ui-g-8 ui-sm-12 ui-md-8 ui-lg-8'>
                  <div className='logoimg' style = {{ height: '80px' }}>
                  </div>
                </div>
                <div className='ui-g-2 ui-sm-3 ui-md-2 ui-lg-2'>
                </div>
              </div>
              <div className='ui-g ui-fluid'>
                <div className='ui-g-12 ui-sm-12 ui-md-12 ui-lg-12'>
                  <label for = "name">Username</label>
                  <span class = "md-inputfield" style = {{ marginBottom: '20px', marginTop: '10px' }}>
                    <InputText id = "netiinputfield1" style = {{ height: '37px' }} type = "text" value = {this.props.username} onChange = {(e) => { this.props.onChangeUsername(e.target.value) }} required class = " ui-state-default ui-corner-all ui-widget" />
                  </span>
                </div>
              </div>
              <div className='ui-g ui-fluid'>
                <div className='ui-g-12 ui-sm-12 ui-md-12 ui-lg-12'>
                  <label for = "name">Password</label>
                  <span class = "md-inputfield" style = {{ marginBottom: '20px', marginTop: '10px' }}>
                    <InputText id = "netiinputfield2" style = {{ height: '37px' }} type = "password" value = {this.props.password} onChange = {(e) => { this.props.onChangePassword(e.target.value) }} required class = "ui-state-default ui-corner-all ui-widget" />
                  </span>
                </div>
              </div>
              <div className='shortFont'>
                <div className='ui-g ui-fluid'>
                  <div class='ui-g-12 ui-sm-6 ui-md-6 ui-lg-6'>
                    <div class = "form-check" >
                      <input type = "checkbox" className = "form-check-input exampleCheck1" className='checkboxsize' />
                      <label class = "form-check-label" for = "exampleCheck1">Remember Me</label>
                    </div>
                  </div>
                  <div class='ui-g-12 ui-sm-6 ui-md-6 ui-lg-6' style = {{ textAlign: 'right' }}>
                    <a href='#/'>Forget Password?</a>
                  </div>
                </div>
              </div>
              <div className='ui-g ui-fluid' style = {{ marginBottom: '13px' }}>
                <div class = "ui-g-12">
                  <Growl ref = {(el) => this.growl = el} />
                  <Button label='LOGIN' onClick = {this.props.submitLoginForm} />
                </div>
              </div>
              
              </form>
              
            </Panel>
          </div>
          <div className='ui-g-1 ui-sm-1 ui-md-1 ui-lg-1'>
          </div>
        </div>
        <div className = "login-img-footer">
          <div class = "textcss"><p>START WITH DIGITAL</p></div>
        </div>
        <div className = "ui-g ui-fluid bottomPart"></div>
        {/* <LoginFooter /> */}
      </div>
    );
  }
}

LoginPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  username: PropTypes.any,
  onChangeUsername: PropTypes.func,
  password: PropTypes.any,
  onChangePassword: PropTypes.func,
  submitLoginForm: PropTypes.func,
  userInfo: PropTypes.any,
  changeMessage: PropTypes.any,
  setErrMessage: PropTypes.any,
};

const mapStateToProps = createStructuredSelector({
  loginpage: makeSelectLoginPage(),
  username: makeSelectUsername(),
  password: makeSelectPassword(),
  userInfo: makeSelectUserInfo(),
  setErrMessage: makeSelectSetErrMessage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onChangeUsername: (value) => {
      dispatch(changeUsername(value));
    },
    onChangePassword: (value) => {
      dispatch(changePassword(value));
    },
    submitLoginForm: (evt) => {
      dispatch(submitForm());
    },
    changeMessage: (evt) => {
      dispatch(getErrMessage(evt));
    }
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'loginPage', reducer });
const withSaga = injectSaga({ key: 'loginPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(LoginPage);
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Это должен быть комментарий, а не ответ из-за краткости вашего ответа.

rst-2cv 24.06.2018 11:00

ОК, я буду знать)

Kasabucki Alexandr 24.06.2018 21:26

`` <form onSubmit = {this.props.submitLoginForm}> `это работает, но клавишу Enter нужно нажать дважды, как и щелчок мышью

Scott Pilgrim 25.06.2018 12:40

Другие вопросы по теме