React Login Page Button - reactjs

Question

This is the full code of my login page. It is based on react-boilerplate .
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);
The submit button works for mouse click, But i also need Enter key( key=13) to submit the form.
I tested some methods , but none of them worked out. How can i do it along with onClick and Enter Key.

Answer 1

You can simply wrap your form fields at tag and listen onSubmit event on it:
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>