MaskedTextField with material-ui

MaskedTextField.jsx

/** @jsx React.DOM */

var React = require('react')
  , mui = require('material-ui')
  , { TextField } = mui
  , $ = require('jquery');

require('jquery.inputmask');

var MaskedTextField = React.createClass({

  getInitialState() {
    return {
      value: '1234567890'
    }
  },

  propTypes: {
    mask: React.PropTypes.string,
    errorText: React.PropTypes.string,
    floatingLabelText: React.PropTypes.string,
    hintText: React.PropTypes.string,
    id: React.PropTypes.string,
    multiLine: React.PropTypes.bool,
    onBlur: React.PropTypes.func,
    onChange: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    type: React.PropTypes.string
  },

  render() {
    // don't render anything, this is where we open the portal
    return <div/>;
  },

  componentDidMount: function() {
    var node = this.getDOMNode();

    var textField = (
      <TextField
        floatingLabelText={this.props.floatingLabelText}
        id={this.props.id}
        value={this.state.value}
        multiLine={this.props.multiLine}
        onBlur={this.props.onBlur}
        onChange={this.props.onChange}
        onFocus={this.props.onFocus}
        type={this.props.type} />
    );

    // start a new React render tree with our node and the children
    // passed in from above, this is the other side of the portal.
    var portal = React.render(textField, node);

    var $input = $(portal._getInputNode());

    $input.inputmask({
      mask: this.props.mask,
      showMaskOnHover: false,
      isComplete: function(buffer, opts) {
        var val = buffer.join('').replace(/\D/g, '');
        this.setState({ value: val });
      }.bind(this)
    });
  },

  componentWillUnmount: function() {
    var node = this.getDOMNode();
    React.unmountComponentAtNode(node);
  }

});

module.exports = MaskedTextField;