How to use the formsy-react.Mixin function in formsy-react

import React from 'react';
import Formsy from 'formsy-react';
import Select from 'react-select';

if (process.env.BROWSER) {
  require('react-select/dist/default.css');
}

export default React.createClass({
  displayName: 'SelectInput',
  // Add the Formsy Mixin
  mixins: [Formsy.Mixin],
  propTypes: {
    name: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    options: React.PropTypes.array.isRequired
  },

  // setValue() will set the value of the component, which in
  // turn will validate it and the rest of the form
  changeValue: function (event) {
    // console.log(event.toDateString());
    this.setValue(event);
  },
  render: function () {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true

formatDate={(date) => date.toISOString().substring(0,10)}
        {...this.props}
        onChange={this.handleValueChange} />
    );
  }
});

let FormsyRadio = React.createClass({
  mixins: [ Formsy.Mixin ],

  // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here
  render: function () {}
});

let FormsyRadioGroup = React.createClass({
  mixins: [ Formsy.Mixin, FormComponentMixin ],

  componentDidMount: function () {
    this.setValue(this._radio.getSelectedValue());
  },

  render: function () {
    return (
       this._radio = c}
        onChange={this.handleValueChange} >
        {this.props.children}
      
    );
  }
});

'use strict';

import React from 'react';
import Formsy from 'formsy-react';

export default React.createClass({
  displayName: 'BootstrapInput',
  // Add the Formsy Mixin
  mixins: [Formsy.Mixin],
  propTypes: {
    name: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    type: React.PropTypes.string.isRequired
  },

  // setValue() will set the value of the component, which in
  // turn will validate it and the rest of the form
  changeValue: function (event) {
    this.setValue(event.currentTarget.value);
  },
  render: function () {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true
    // when the value is empty and the required prop is

let React = require('react');

let Formsy = require('formsy-react');

let SideInput = React.createClass({
    mixins: [Formsy.Mixin],

    handleChange(event) {
        let value = event.target.value;
        this.props.onChange(value);
        this.setValue(value);
    },
    render() {
        let isErrorVisible = (this.isFormSubmitted() || !this.isPristine()) && !this.isValid();

        let isBuyChecked = this.props.value === 'buy';
        let isSellChecked = this.props.value === 'sell';
        return (
            <div>
                <label>
                    <input checked="{isBuyChecked}" novalidate="" required="" type="radio" value="buy" name="order.isBuy"></label></div>

import { isArray, map } from 'lodash';
import Formsy from 'formsy-react';
import createReactClass from 'create-react-class';

/**
 * Internal Dependencies
 */
import Label from './label';
import getUniqueId from './counter';
import FormInputValidation from '../form-input-validation';
import requiredFieldErrorFormatter from './required-error-label';

export default createReactClass( {
	displayName: 'MultiCheckboxInput',

	mixins: [ Formsy.Mixin ],

	propTypes: {
		name: PropTypes.string.isRequired,
		description: PropTypes.string,
		className: PropTypes.any,
		choices: PropTypes.any,
		defaultValue: PropTypes.array,
		validations: PropTypes.string,
		onChange: PropTypes.func,
		showSelectAll: PropTypes.bool,
		selectAllLabel: PropTypes.string,
	},

	getDefaultProps: function() {
		return {
			showSelectAll: false,

import { setMuiComponentAndMaybeFocus } from './utils';

const FormsyDate = React.createClass({

  propTypes: {
    defaultDate: React.PropTypes.object,
    name: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func,
    requiredError: React.PropTypes.string,
    validationError: React.PropTypes.string,
    validationErrors: React.PropTypes.object,
    validations: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
    value: React.PropTypes.object,
  },

  mixins: [Formsy.Mixin],

  componentDidMount() {
    const { defaultDate } = this.props;
    const value = this.getValue();

    if (typeof value === 'undefined' && typeof defaultDate !== 'undefined') {
      this.setValue(defaultDate);
    }
  },

  handleChange(event, value) {
    this.setValue(value);
    if (this.props.onChange) this.props.onChange(event, value);
  },

  setMuiComponentAndMaybeFocus: setMuiComponentAndMaybeFocus,

/*jshint node:true */

'use strict';

var React = require('react');
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');

var CheckboxGroup = React.createClass({

    mixins: [Formsy.Mixin, ComponentMixin],

    propTypes: {
        name: React.PropTypes.string.isRequired,
        options: React.PropTypes.array.isRequired
    },

    getDefaultProps: function() {
        return {
            label: '',
            help: null
        };
    },

    changeCheckbox: function() {
        var value = [];
        this.props.options.forEach(function(option, key) {

import classNames from 'classnames';
import Formsy from 'formsy-react';
import createReactClass from 'create-react-class';

/**
 * Internal Dependencies
 */
import Label from './label';
import getUniqueId from './counter';
import FormInputValidation from '../form-input-validation';
import requiredFieldErrorFormatter from './required-error-label';

export default createReactClass( {
	displayName: 'CheckboxInput',

	mixins: [ Formsy.Mixin ],

	propTypes: {
		name: PropTypes.string.isRequired,
		description: PropTypes.string,
		className: PropTypes.any,
		style: PropTypes.any,
		label: PropTypes.any.isRequired,
		labelSuffix: PropTypes.any,
		required: PropTypes.any,
		validations: PropTypes.string,
		validationError: PropTypes.string,
	},

	getInitialState: function() {
		return {
			uniqueId: getUniqueId(),

/*jshint node:true */

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require('react');
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');

var Checkbox = React.createClass({
    displayName: 'Checkbox',

    mixins: [Formsy.Mixin, ComponentMixin],

    getDefaultProps: function getDefaultProps() {
        return {
            label: '',
            rowLabel: '',
            value: false
        };
    },

    changeValue: function changeValue(event) {
        var target = event.currentTarget;
        this.setValue(target.checked);
        this.props.onChange(this.props.name, target.checked);
    },

    renderElement: function renderElement() {

import React from 'react';
import Formsy from 'formsy-react';
import TimePicker from 'material-ui/TimePicker';
import {setMuiComponentAndMaybeFocus} from './utils';

let FormsyTime = React.createClass({
  mixins: [Formsy.Mixin],

  propTypes: {
    name: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func,
    value: React.PropTypes.object,
  },

  componentDidMount() {
    const {defaultTime} = this.props;
    let value = this.getValue();

    if (typeof value === 'undefined' && typeof defaultTime !== 'undefined') {
      this.setValue(defaultTime);
    }
  },