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()}>
,我的页面仍会刷新。
我不确定这是否是我的编码,浏览器,版本或其他任何问题,因为几乎在昨天它没有任何问题。