反应登录页面按钮

时间：2018-06-24 07:57:27

标签： reactjs react-redux 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);

提交按钮适用于鼠标单击，但是我还需要输入Enter键（key = 13）来提交表单。

我测试了一些方法，但没有一个成功。我该如何与onClick和Enter键一起使用。

1 个答案:

答案 0 :(得分：0)

您只需将表单字段包装在标记上，并在其上监听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>

相关问题
最新问题