Skip to content

Instantly share code, notes, and snippets.

@veekram
Forked from mlaursen/ExampleReduxForm.jsx
Created July 21, 2017 06:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veekram/b82fb0a24d866ab11334480d98e32c2f to your computer and use it in GitHub Desktop.
Save veekram/b82fb0a24d866ab11334480d98e32c2f to your computer and use it in GitHub Desktop.
Code for example redux-form and react-md
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import Button from 'react-md/lib/Buttons/Button';
import TextField from 'react-md/lib/TextFields';
const required = ['email', 'phone'];
const validate = values => {
const errors = {};
required.forEach(field => {
if (!values[field]) {
errors[field] = 'Required';
}
});
return errors;
};
/* eslint-disable react/prop-types */
const renderTextField = ({ input, meta: { touched, error }, ...others }) => (
<TextField {...input} {...others} error={touched && !!error} errorText={error} />
);
const ExampleForm = reduxForm({ form: 'example', validate })(({ handleSubmit }) => (
<form onSubmit={handleSubmit} className="md-grid md-text-container">
<Field
id="uid"
name="uid"
type="text"
label="Unique identifier"
helpText="A unique id, probably a serial number"
component={renderTextField}
required
className="md-cell md-cell--12"
/>
<Field
id="phone"
name="phone"
type="tel"
label="Phone number"
placeholder="(xxx) xxx-xxxx"
helpText="Do something"
className="md-cell md-cell--12"
required
component={renderTextField}
/>
<footer className="md-dialog-footer md-dialog-footer--inline md-cell md-cell--12">
<Button flat primary label="Submit" type="submit" className="md-cell--right" />
</footer>
</form>
));
const handleSubmit = values => {
console.log('values:', values);
};
export default () => <ExampleForm onSubmit={handleSubmit} />;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment