Merge pull request insin#30 from insin/update-value

Update value

Author: iamdustan

demo/index.html

@@ -92,7 +92,12 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
       <p className="lead">A React component which creates a masked <code>&lt;input/&gt;</code></p>
       <div className="form-field">
         <label htmlFor="card">Card Number:</label>
-        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" onChange={this._onChange}/>
+        <MaskedInput mask="1111 1111 1111 1111" name="card" id="card" size="20" value={this.state.card} onChange={this._onChange}/>
+      </div>
+      <p>You can even externally update the card state like a standard input element:</p>
+      <div className="form-field">
+        <label htmlFor="card">Externally Update:</label>
+        <input onChange={this._onChange} name="card" maxLength="16" style={{borderBottom: '1px solid #999'}} />
       </div>
       <p>Placeholders are automatically generated but can be overridden with your own:</p>
       <div className="form-field">

src/index.jsx

@@ -43,6 +43,9 @@ var MaskedInput = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      this.mask.setValue(nextProps.value)
+    }
     if (this.props.mask !== nextProps.mask) {
       this.mask.setPattern(nextProps.mask, {value: this.mask.getRawValue()})
     }