react and select2

select2.js

//taming select2
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'

var input = null

class SelectFieldComponent extends Component {
  
  componentDidMount() {
    //UserRoleForm.onRendered()
    const dom = $(input)
    dom.select2(Object.assign({}, global.select2Config))
    dom.on("change",(e) => {
      if(this.props.onChange) {
        console.log("change")
        this.props.onChange(e, this.props.name, dom.val())
      }
    })
    dom.val(this.props.value)
    dom.trigger("change.select2")
  }

  componentDidUpdate() {
    const dom = $(input)
    dom.val(this.props.value)
    dom.trigger("change.select2")
  }

render() {
    const props = this.props
    const emptyLabel = props.placeholder ? props.placeholder : '\u00A0'
    let optionsDom = [(<option value="" key={0}>{emptyLabel}</option>)]
    if(props.options) {
      for(var c=0; c < props.options.length; c++) {
        optionsDom.push(<option value={props.options[c].id} key={'o'+c}>{props.options[c].label}</option>)
      }
    }

    let inputDom = (<select ref={(i) => input = i} name={name} className={inputClass}>
              {optionsDom}
              </select>)

    const errorDom = props.errors[name] ? (<div className="alert alert-danger">
      {props.errors[name].join(", ")}</div>): (<div></div>)

    inputDom = hasLabel ? ( <div className={"col-md-"+fieldCols}>
      {inputDom}{errorDom}
      </div>): (<div>{inputDom}{errorDom}</div>)

    const wrapperClass = row ? "row form-group": "form-group"
    
    return (
      <div className={wrapperClass}>
        {labelDom}
        {inputDom}
      </div>)
  }
      
}