StephenGrider / ReduxSimpleStarter

Starter pack for an awesome Udemy course
MIT License
3.56k stars 4.63k forks source link

Redux-form submit buttom #254

Open grisena opened 6 years ago

grisena commented 6 years ago

import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import { createPost } from '../actions/index';

class PostsNew extends Component { render() { const { fields: {title, categories, content}, handleSubmit } = this.props;

return(
  <Form onSubmit ={ handleSubmit(this.props.createPost) }>
    <h3> Create A New Post </h3>
    <div className ={ `form-group ${ title.touched && title.invalid ? 'has-danger' : '' }`>
     <label> Title </label>
     <input type ="text" className="form-control" {...title} />
      <div className="text-help">
        {title.touched ? title.error : ''}
      </div>
    </div>

   <div className ={ `form-group ${ categories.touched && categories.invalid ? 'has-danger' : '' }`>
     <label> Categories </label>
     <input type ="text" className="form-control" {...categories} />
     <div className="text-help">
       {categories.touched ? categories.error : ''}
     </div>
    </div>

    <div className ={ `form-group ${ content.touched && content.invalid ? 'has-danger' : '' }`>
     <label> Content </label>
     <textarea type ="text" className="form-control" {...content} />
     <div className="text-help">
       {content.touched ? content.error : ''}
     </div>
    </div>

    <button type="submit" className="btn btn-primary"> Submit </button>
  </Form>
);

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

if(!values.title) { errors.title = 'Enter a username'; }

if(!values.categories) { errors.categories = 'Enter categories'; }

if(!values.content) { errors.content = 'Enter some content'; } return errors;

}

export default reduxForm ({

form: 'PostsNewForm', fields: ['title','categories','content'], validate, onSubmit: () => { } },null,{createPost}) (PostsNew);

HELP PLEASE!!! Submit button seems to not work and also the validation.

justlearncode commented 6 years ago

use version "redux-form": "^5.3.6", it will definately solve the problem

justlearncode commented 6 years ago

You have another error in <div className ={ form-group ${ title.touched && title.invalid ? 'has-danger' : '' }> CHANGE TO <div className ={ form-group ${ title.touched && title.invalid ? 'has-danger' : '' }}> You forget }

CODE: posts_new.js IN LINE{23, 33, 43} https://github.com/justlearncode/react-redux-add-postsReduxSimpleStarter-issues-254/blob/master/posts_new.js