ReduxForm handleSubmit刷新页面并分配了字段

时间:2017-07-28 18:44:07

标签: node.js reactjs redux jsx redux-form

环境

ReduxForm: v6.5.0
节点: v8.1.2
浏览器:谷歌浏览器

我已经查看了handleSubmit页面刷新的所有现有问题,但似乎没有一个能解决我的问题。

LoginForm的

import React, { Component } from 'react'
import { reduxForm, Field, propTypes } from 'redux-form'
import classNames from 'classnames'

import loginValidation from './validation'

@reduxForm({
  form: 'loginForm',
  validate: loginValidation
})
export default class LoginForm extends Component {

  static propTypes = {
    ...propTypes
  }

  inputField = ({ input, label, type, meta: { touched, error } }) => (
    <fieldset className="form__fieldset login-form__fieldset">
      <div className="form__field">
        <input {...input}
          type={type}
          placeholder={touched && error ? error : label}
          className={classNames('form__input login-form__input',
            touched && error ? 'ng-invalid' : ''
          )}
        /> {/* .ng-invalid */}
      </div>
      {type === 'password' &&
        <div className="form__helper login-form__helper">
          <div className="small">
            <a>I've forgotten my password</a>
          </div>
        </div>
      }
    </fieldset>
  )

  render() {
    const { inputField, props } = this
    const { handleSubmit, submitting } = props

    return (
        <div className="habbo-login-form">
          <form className="login-form__form" onSubmit={handleSubmit}>
            <Field name="username" type="text" component={inputField} label="Username" />
            <Field name="password" type="password" component={inputField} label="Password" />
            <button className="login-form__button" type="submit" disabled={submitting}>Let's go!</button>
          </form>
          <div className="login-form__social">
            <div className="habbo-facebook-connect" type="large">
              <button className="facebook-connect">Login with Facebook</button>
            </div>
            <div className="habbo-facebook-connect" type="small">
              <button className="facebook-connect"></button>
            </div>
          </div>
        </div>
    )
  }

}

HOC LoginHeader

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import classNames from 'classnames'

import LoginForm from './LoginForm'
import { authActions } from '../redux/modules/auth'

@connect(
  state => ({
    user: state.auth.user,
    ...state.form.loginForm
  }),
  { ...authActions }
)
export default class LoginHeader extends Component {

  static propTypes = {
    user: PropTypes.object,
    login: PropTypes.func.isRequired,
    logout: PropTypes.func.isRequired
  }

  static contextTypes = {
    router: PropTypes.object
  }

  onSubmit = (data) => this.props.login(data).then(console.log)

  render() {
    const { submitFailed } = this.props

    const headerLoginForm = classNames(
      'header__login-form',
      submitFailed ? 'animated shake' : ''
    )

    return (
      <div className="header__top sticky-header sticky-header--top">
        <div className="wrapper">
          <div className="header__top__content">
            <div className={headerLoginForm}>
              <LoginForm onSubmit={this.onSubmit} />
            </div>
          </div>
        </div>
      </div>
    )
  }

}

即使我尝试将<form onSubmit={handleSubmit}>替换为<form onSubmit={(e) => e.preventDefault()}>,我的页面仍会刷新。

我不确定这是否是我的编码,浏览器,版本或其他任何问题,因为几乎在昨天它没有任何问题。

0 个答案:

没有答案