postcode.js.jsx

var PostcodeCheck = React.createClass({
  
  // omitting existing code for brevity
  
  getInitialState: function() {
    return {
      postcode: '',
      housenumber: '',
      housenumberAddition: '',
      result: ''
    };
  },

  validatePostcode: function(e) {
    this.setState({result: '', postcode: e.target.value.
      substr(0, 7).
      toUpperCase()});
  },

  validateHousenumber: function(e) {
    this.setState({result: '', housenumber: e.target.value.
      replace(/\D/g,'')});
  },

  validateHousenumberAddition: function(e) {
    this.setState({result: '', housenumberAddition: e.target.value.
      toUpperCase()});
  },

  render: function() {
    return (
      <section>
        <h2>Postcodecheck</h2>
        <p>Check hier of u al een vergunning kunt aanvragen met BLITTS.</p>
        <form id="postcodecheck" onSubmit={this.handleSubmit}>
          <p>Uw postcode/huisnummer/toevoeging:</p>
          <input id="postcode" placeholder="1234AA" value={this.state.postcode} onChange={this.validatePostcode}/>
          <input id="housenumber" placeholder="1" value={this.state.housenumber} onChange={this.validateHousenumber}/>
          <input id="housenumber_addition" value={this.state.housenumberAddition} onChange={this.validateHousenumberAddition}/>
          <input type="submit" value="Check!" className="next-button"/>
          <p className="postcodecheck-result">{this.state.result}</p>
        </form>
      </section>
    );
  }
});