reactjs - React Click ハンドラーが機能しないが、jQuery dom render は機能する

Question

これらの違いをどのように表現すればよいかわかりませんので、ご容赦ください。

Aloha Editor ライブラリを使用する反応アプリがあります。

私には2人の子供を持つ親がいます:

ContentBlock
-> ContentBlockCanvas
-> ContentBlockToolbar

ContentBlockCanvas の componentDidMount から渡された参照を介してエディターを開始する ContentBlock の関数があります。

同様のメソッドを使用して、ContentBlockCanvas 内の選択範囲に太字のスタイルを適用するメソッド呼び出しを行う ContentBlockToolbar からクリック ハンドラーを渡します。

キャンバスの初期化は正常に機能します。フォーマットボタンをクリックしても何も表示されません。コンソールログで接続が存在することを証明できますが、メソッドは何もせず、エラーも何もしません。

dom の script タグを介してレンダリングされた jquery を介して、明示的なクリック ハンドラーに SAME メソッド呼び出しを配置すると、完全に機能します。

それはなぜで、何が間違っているのでしょうか? ありがとう！

コード！！

// 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…&lt;/span>
            <span className="sub-title">Vortrag…&lt;/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>
    )
  }
})