Created
July 7, 2017 15:31
-
-
Save michaelnagy/a400e9b243553da8e0ce094a0855b2a1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Stateless component to use inside the form | |
const RenderField = ({ | |
input, | |
placeholder, | |
type, | |
meta: { touched, error } | |
}) => { | |
return ( | |
<div style={{ width: '100%' }}> | |
{touched && error ? | |
<Form.Field error > | |
<Label className='animated fadeIn' basic color='red' pointing='below'>{error}</Label> | |
<input size={'medium'} className='input' {...input} placeholder={placeholder} /> | |
</Form.Field> | |
: | |
<Form.Field> | |
<input size={'medium'} className='input' {...input} placeholder={placeholder} type={type} /> | |
</Form.Field> | |
} | |
</div> | |
) | |
} | |
// Decorating the Form to use redux-form package | |
@reduxForm({ | |
form: 'register', | |
validate | |
}) | |
// The Register form | |
class FavForm extends Component { | |
constructor(props) { | |
super(props) | |
} | |
render() { | |
const { error, handleSubmit } = this.props | |
return ( | |
<Form size='big' error={error && true} onSubmit={handleSubmit(submit)} className='animated fadeIn'> | |
<Form.Group inline> | |
<Field name="title" component={RenderField} type="text" placeholder="Title" /> | |
<Field name="address" component={RenderField} type="text" placeholder="Address (with http://)" /> | |
<Field name="tags" component={RenderField} type="text" placeholder="Tags (separated by space)" /> | |
<Button size='big' type='submit'>Add</Button> | |
</Form.Group> | |
{error && | |
<Message className='animated fadeIn' | |
error | |
header={error} | |
/> | |
} | |
</Form> | |
) | |
} | |
} | |
export default FavForm = connect()(FavForm) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Maybe the solution redux-form/redux-form#1853 (comment) not working because you are still rerendering input when
touched
changes?