我尝试了此网址中文档的代码: https://redux-form.com/7.0.3/examples/submitvalidation/
但它没有用。调用submit函数并抛出SubmissionError,但我没有看到表单中的实际错误。
这是我的代码:
/**
*
* SignupForm
*
*/
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import PropTypes from 'prop-types';
import messages from './messages';
import submit from './submit';
import './index.css';
const renderField = ({
input, // eslint-disable-line
name, // eslint-disable-line
label, // eslint-disable-line
type, // eslint-disable-line
meta: { touched, error } // eslint-disable-line
}) => (
<div className="input-group">
<label htmlFor={name}>
{label}
</label>
<div>
<input {...input} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
class SignupForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
const { handleSubmit } = this.props;
return (
<div className="form-container">
<h1 className="form-header">{messages.header.defaultMessage}</h1>
<form onSubmit={handleSubmit(submit)}>
<Field name="fName" component={renderField} type="text" label={messages.fname.defaultMessage} />
<Field name="lName" component={renderField} type="text" label={messages.lname.defaultMessage} />
<Field name="email" component={renderField} type="text" label={messages.email.defaultMessage} />
<Field name="password" component={renderField} type="password" label={messages.password.defaultMessage} />
<Field name="cpassword" component={renderField} type="password" label={messages.cpassword.defaultMessage} />
<input type="submit" value="Next" />
</form>
</div>
);
}
}
SignupForm.propTypes = {
handleSubmit: PropTypes.func.isRequired,
};
export default reduxForm({
// a unique name for the form
form: 'signup-part1',
})(SignupForm);
以下是提交表格:
import { SubmissionError } from 'redux-form';
import { validateEmail } from '../../utils';
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
function submit(values) {
console.log('Submit Called');
return sleep(100).then(() => {
const valuesObject = values.toJS();
if (!valuesObject.fName) {
throw new SubmissionError({
fName: 'First name is required',
_error: 'Login failed!',
});
} else if (!valuesObject.lName) {
throw new SubmissionError({
lName: 'Last name is required',
_error: 'Login failed!',
});
} else if (!valuesObject.email) {
throw new SubmissionError({
email: 'Email is required',
_error: 'Login failed!',
});
} else if (!validateEmail(valuesObject.email)) {
throw new SubmissionError({
email: 'Invalid email address',
_error: 'Login failed!',
});
} else if (!valuesObject.password) {
throw new SubmissionError({
password: 'Please enter a password',
_error: 'Login failed!',
});
} else if (!valuesObject.cpassword) {
throw new SubmissionError({
cpassword: 'Please enter a password',
_error: 'Login failed!',
});
} else if (valuesObject.password.length < 6) {
throw new SubmissionError({
password: 'Password must be at least 6 characters',
_error: 'Login failed!',
});
} else if (valuesObject.password !== valuesObject.cpassword) {
throw new SubmissionError({
cpassword: 'Passwords don\'t match',
_error: 'Login failed!',
});
}
}).catch(error => {
console.log('catch');
throw new SubmissionError(error);
});
}
export default submit;
我不明白为什么我看不到错误。我做的与示例完全相同。
答案 0 :(得分:1)
好的,我设法解决了这个恼人的问题。我所要做的就是从&#39; redux-form / immutable&#39;中导入SubmissionError。而不是常规的&#39; redux-form&#39;。 如果您正在使用Immutable.js
,请确保执行此操作