试图使验证功能与Redux-Form一起使用



我之前在另一个应用程序上尝试过此操作,然后复制了代码并编辑了路径,以及我为此应用所需的东西。我没有遇到任何错误,但我似乎无法使它起作用。它不会显示任何错误消息或将我的类应用于输入。

import React, { Component } from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';
class Signin extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  renderField(field) {
    const { meta: {touched, error} } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;
    return (
      <div className={className}>
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          { touched ? error : ''}
        </div>
      </div>
    )
  }
  onSubmit({email, password}) {
    console.log(email, password);
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <Field
          label="Email"
          name="email"
          component={this.renderField}
        />
        <Field
          label="Password"
          name="password"
          component={this.renderField}
        />
        <button type="submit" className="btn btn-success">Sign In</button>
      </form>
    );
  }
}
function validate(values) {
  const errors = {};
  //Validate the inputs from values
  if(!values.email) {
    errors.title = "Enter an email!";
  }
  if(!values.password) {
    errors.categories = "Enter a password!";
  }
  //If errors is empty, the form is fine to submit
  //If errors has any properties, redux form assumes form is invalid
  return errors;
}
export default reduxForm({
  validate,
  form: 'signin'
})(connect(null, actions)(Signin));

,因此问题在于附加错误日志的验证函数,因为错误映射到标题和类别,而字段名称是电子邮件和密码

使用

function validate(values) {
  const errors = {};
  //Validate the inputs from values
  if(!values.email) {
    errors.email = "Enter an email!";
  }
  if(!values.password) {
    errors.password = "Enter a password!";
  }
  //If errors is empty, the form is fine to submit
  //If errors has any properties, redux form assumes form is invalid
  return errors;
}

最新更新