title: Mask card number input in React
body: <p>I'm learning React and want to make an input  with two constraints:</p>
  
  <ul>
  <li>16 numbers,</li>
  <li>put a space after every fourth.</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  export default class CardNumberInput extends Component {
    constructor() {
      super();
      this.state = { value: '' };
    }
  
    handleChange(event) {
      React.findDOMNode(this.refs.cardInput).mask("0000 0000 0000 0000");
      this.setState({ value: event.target.value });
    }
  
    render() {
      let value = this.state.value;
  
      return (
        &lt;div&gt;
          &lt;label htmlFor="cardInput"&gt;Card Number: &lt;/label&gt;
          &lt;input ref="cardInput" id="cardInput" onChange={this.handleChange} type="number" value={value} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I don't know whether I'm doing it right (use refs), because console.log(React.findDOMNode(this.refs.cardInput)) returns null o_O</p>
  
  <p>p.s. .mask is from <a href="http://igorescobar.github.io/jQuery-Mask-Plugin/" rel="noreferrer">http://igorescobar.github.io/jQuery-Mask-Plugin/</a></p>