React Click handler not working but jQuery dom render does

Question

I'm not sure how to phrase the differences between these so plase bear with me:

I have a react app that uses the Aloha Editor library.

I have a parent with two children:

ContentBlock
-> ContentBlockCanvas
-> ContentBlockToolbar

There's a function on ContentBlock that initiates the editor via a reference passed up from ContentBlockCanvas's componentDidMount.

I use a similar method to pass up a click handler from ContentBlockToolbar that makes a method call to apply a bold styling to a selection inside my ContentBlockCanvas.

The init of the Canvas works fine. When I click on my format button I get nothing, I can prove the connection is there by console logging but the method doesn't do a single thing, no error, nothing.

If I put the SAME method call on an explicit click handler via jquery rendered through a script tag in the dom, it works perfectly.

Why is that and what might I be doing wrong? Thanks!

Code!!

// The parent

/**
 * The ContentBlock
 */

var ContentBlock = React.createClass({
  getInitialState: function(){
    return ({
      activeEditor: ''
    })
  },
  processMethod: function(method) {
    //console.log(aloha.dom.query('#helper', document));
     aloha.ui.command(aloha.ui.commands.bold)
    //aloha.ui.command(aloha.dom.query('#helper', document), aloha.ui.commands.italic)
  },
  invokeEditor: function(e){
    aloha(e);
    this.setState({activeEditor: e})
  },
  render: function() {
    return (
      <div>
        <ContentBlockToolbar methodInvoker={this.processMethod} />
        <ContentBlockCanvas editorInvoker={this.invokeEditor} index="1" />
      </div>
    )
  }
})

// The editor

var ContentBlockCanvas = React.createClass({
  invokeEditor: function() {
    this.props.editorInvoker(this.refs["editor"+this.props.index]);
  },
  render: function() {
    return (
      <div id="helper" className="a4-master" onClick={this.invokeEditor} ref={"editor"+this.props.index}>
        <div className="a5-quer">
          <div className="header-section">
            <span className="title">Vortra…</span>
            <span className="sub-title">Vortrag…</span>
          </div>
          <div className="two-column body-section">
            <div className="column">
            <span className="header">Arbeitsplätze im Vortragssaal</span>
            <span className="body-text">Während der Prüf…
            </span>
        </div>
        <div className="column">
          <span className="header">Bitte beachten Sie:</span>
          <span className="body-text">Im Vor…
          </span>
        </div>
          </div>
        </div>
      </div>
    )
  }
})

// The toolbar

/**
 * ContentBlock Toolbar
 */

var ContentBlockToolbar = React.createClass({
  
  invokeMethod: function(e) {
    this.props.methodInvoker(e.target.value);
  },
  
  toggleLogo: function() {
    console.log("Handle this.");
  },
  
  render: function(){
    return (
      <div className="toolbar">
      <p>Editing: d: Body!</p>
      <button value="bold" onClick={this.invokeMethod}>Bold</button>
      <button value="italic" onClick={this.invokeMethod}>Italic</button>
      <button value="logo" onClick={this.toggleLogo}>Logo</button>
      </div>
    )
  }
})