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





Вы можете просто обернуть поля формы тегом и прослушать на нем событие 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>Это должен быть комментарий, а не ответ из-за краткости вашего ответа.
ОК, я буду знать)
`` <form onSubmit = {this.props.submitLoginForm}> `это работает, но клавишу Enter нужно нажать дважды, как и щелчок мышью
прочтите это: stackoverflow.com/questions/27827234/…