sematicui_redux-form_integrate.js

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { Form, Button, Label, Input } from 'semantic-ui-react';

const CustomInput = ({ input, meta: { error, touched }, label, ...custom }) => (
  <Form.Field error={error && touched}>
    <label htmlFor={custom.name} >{label}</label>
    <Input id={custom.name} {...input} {...custom} />
    {error && touched && <Label basic color="red" pointing>{error}</Label>}
  </Form.Field>
);

class TestForm extends Component {
  render() {
    const {
      handleSubmit,
      invalid,
      pristine,
      reset,
      submitting     
    } = this.props;
    return (
      <div>
        <Form onSubmit={handleSubmit}>
          <Field
            name="name"
            label={'Name'}
            component={CustomInput}
          />
          <Field
            name="url"
            label={'URL'}
            component={CustomInput}
          />
          <Button
            positive
            type="submit"
            loading={submitting}
            disabled={pristine || submitting || invalid}
          >
            Save
          </Button>
          <Button
            basic
            type="button"
            onClick={reset}
            disabled={pristine || submitting}
          >
            Reset
          </Button>
        </Form>
      </div>
    );
  }
}

export default reduxForm({ form: 'test' })(TestForm);