React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by hokuma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container1"></div>

<div id="container2"></div>

JavaScript 1.7

var Content = React.createClass({
  getDefaultProps: function() {
    return {
      onSuccess: function() {}
    };
  },
  save: function() {
    console.log("save");
    this.props.onSuccess();
  },
  render: function() {
    return (
      <div><a onClick={this.save}>Save!</a></div>
    );
  }  
});

var Dialog = React.createClass({
  closeHandler: function() {
    var targetEvent = this.props.event;
    var originalHandler = this.props.children.props[targetEvent];
    var prop = {};
    var handler;
    if(originalHandler) {
      handler = function() {
        originalHandler();
        console.log('close');
      };
    } else {
      handler = function() {
        console.log('close');
      };
    }
    prop[targetEvent] = handler;
    return prop;
  },
  render: function() {
    var content = this.props.children;
    return React.cloneElement(
      content,
      this.closeHandler()
    );
  }
})

function originalHandler() {
  console.log('Original Handler');
}

ReactDOM.render(
  <Dialog event='onSuccess'><Content/></Dialog>,
  document.getElementById('container1')
);

ReactDOM.render(
  <Dialog event='onSuccess'><Content onSuccess={originalHandler}/></Dialog>,
  document.getElementById('container2')
);