create-custom-input.jsx

var InputComponent = React.createClass({

    propTypes: {
        type: React.PropTypes.string,
        placeholder: React.PropTypes.string,
        id: React.PropTypes.string,
        classStyle: React.PropTypes.string,
        defaultVal: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number
        ]),
        isRequired: React.PropTypes.bool
    },

    /**
     * This is a work around helper method
     * to get the value of the input component
     * using the refs values
     * @returns {*}
     */
    getText: function () {
        //get the value of the text from the input component
        return ReactDom.findDOMNode(this.refs.value).value;
    },

    /**
     * this get the file content if
     * the input type is a file
     */
    getFileContent: function () {
        if (this.props.type !== 'file') {
            throw("Input type is not a file");
        }
        return ReactDom.findDOMNode(this.refs.value).files[0];
    },
    setText: function (value) {
        ReactDom.findDOMNode(this.refs.value).value = typeof value == 'undefined' ? "" : value;
    },
    /**
     * work arround method used
     * for setting the input focus method
     */
    getFocus: function () {
        ReactDom.findDOMNode(this.refs.value).focus();
    },

    /**
     * helper method to clear the value
     * from the input component
     */
    clear: function () {
        ReactDom.findDOMNode(this.refs.value).value = '';
    },
    render: function () {

        return (
            <div>
                <label htmlFor={this.props.id}>{this.props.children}</label>
                <input type={this.props.type}
                       placeholder={this.props.placeholder}
                       id={this.props.id}
                       ref="value" name={this.props.name}
                       className={this.props.classStyle}
                       defaultValue={this.props.defaultVal}
                       required={this.props.isRequired}
                    />
            </div>
        )
    }
});


var FormComponents = {
    renderInputBox: function (id, type, label ,isRequired, defaultVal) {
        return <InputWidget ref={id}
                            type={type}
                            key={id}
                            placeholder={label}
                            id={id}
                            name={id}
                            defaultVal={defaultVal}
                            isRequired={isRequired}
                            classStyle="form-control">
            {label}
        </InputWidget>
    }
}

var ImageUploadComponent = React.createClass({
    render: function () {
        return (
                    <div className="row">
                            <div className="col-sm-12">
                                //specify your file type
                                {FormComponents.renderInputBox('imageToUpload', 'file' , 'Select a file')}
                            </div>
                            [use the handleUpload for additional]
                    </div>
        )

    },
  
   _handleUpload: function (event) {
        let fileToUpload = this.refs.imageToUpload.getFileContent();
        console.log("Form Data inside handle upload" + fileToUpload.name);
    }
}