Question

我正在创建我的第一个Redux表单，但表单没有将信息添加到数据库。

class UserInfo extends Component{
    renderField(field) {
        const { meta: { touched, error } } = field;
        const className = `form-group ${touched && error ? "has-danger" : ""}`;

        return (
          <div className={className}>
            <label>{field.label}</label>
            <input className="form-control" type="text" {...field.input} />
            <div className="text-help">
              {touched ? error : ""}
            </div>
          </div>
        );
      }
    onSubmit(values){

        //this.props.addUser(values);
        console.log(values);
    }
render(){
        const { handleSubmit, pristine, reset, submitting } = this.props;
        return(
            <div>
                <div>
                    <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                        <div className='form-row'>
                            <Field label='Name' component={this.renderField} name='username'  />
                            <Field label='Address' component={this.renderField }name='address'  />
                            <Field label='Contact' component={this.renderField} name='contact'  />
                            <Field label='Email'component={this.renderField} name='email' />
                            <button type="submit"  className="btn btn-primary">Add new User</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

function validate(values) {
    const errors = {};

    if (!values.uername) {
      errors.username = 'Please enter a first name';
    }

    if (!values.address) {
      errors.address = 'Please enter an address';
    }

    if (!values.contact) {
        errors.contact = 'Please enter a phone number'
    }

    if (!values.email) {
      errors.email = 'Please enter an email';
    }

    return errors;
  }

export default reduxForm({
    validate,
    form: 'UserForm'
})(connect(null, { addUser })(UserInfo));

如果我在console.log(values)功能中使用onSubmit，我将无法在浏览器中获得任何输出。我使用createLogger来帮助您完成操作。它显示类型：

＆＃34; @@ Redux的形式/ SET_SUBMIT_FAILED＆＃34;

我无法弄清楚这是什么类型的错误。

Answer 1

使用开发人员工具（ctrl + shift + I），使用redux-- state--form-'NameofReduxform'-syncErrors。然后，您可能会看到一些必填字段。您需要填充这些字段才能使提交工作。希望这会有所帮助！

Redux-form无法提交

1 个答案: