title: react js component polymorphism
body: <p>I have several identical forms with validation function.
  I want to create another form with same behavior except validation function.</p>
  
  <p>I try to use mixins for this, but mixins doesn't support method override.</p>
  
  <p>What approach is the best for this problem?</p>
  
  <p>This is an example of problem: <a href="https://jsfiddle.net/69z2wepo/9150/" rel="nofollow">https://jsfiddle.net/69z2wepo/9150/</a></p>
  
  <pre><code>var FormMixin = {
      validate: function () {
          if (this.state.message !== '') {
              this.setState({status: 'ok'});
          } else {
              this.setState({status: 'error'});
          }
      },
      getInitialState: function () {
          return {
              message: 'Hello123!',
              status: ''
          };
      },
      handleChange: function (newValue) {
          this.setState({
              message: newValue
          });
      },
      valueLink: function() {
          return {
            value: this.state.message,
            requestChange: this.handleChange
          }     
      },
      render: function () {
          return (
           &lt;div&gt;
             &lt;input type = "text" valueLink = {this.valueLink()} /&gt;
             &lt;button onClick={this.validate} &gt;Validate&lt;/button&gt;
             &lt;div&gt;{this.state.status}&lt;/div&gt;
           &lt;/div&gt;
          );
      }
  }
  
  var Form = React.createClass({
      mixins: [FormMixin]
  });
  
  var FormEmpty = React.createClass({
      /*validate: function() { // How to override validation
        this.setState({status: 'ok'});
      },*/
      mixins: [FormMixin]
  });
  
  var Hello = React.createClass({
      render: function() {
          return (&lt;div&gt;
              &lt;Form /&gt;
              &lt;Form /&gt;
              &lt;Form /&gt;
              &lt;FormEmpty /&gt;
          &lt;/div&gt;);
      }
  });
  
  React.render(&lt;Hello /&gt;, document.getElementById('container'));
  </code></pre>