React Click处理程序不起作用但是jQuery dom render没有

Question

我不确定如何说出这些与我之间的差异：

我有一个使用Aloha Editor库的反应应用程序。

我有一个有两个孩子的父母：

内文
  - ＆GT; ContentBlockCanvas
  - ＆GT; ContentBlockToolbar

ContentBlock上有一个函数，它通过从ContentBlockCanvas的componentDidMount传递的引用来启动编辑器。

我使用类似的方法从ContentBlockToolbar传递一个单击处理程序，它使方法调用将粗体样式应用于ContentBlockCanvas中的选择。

Canvas的初始化工作正常。当我点击我的格式按钮时，我什么也得不到，我可以通过控制台记录证明连接是存在的，但该方法不做任何事情，没有错误，没有。

如果我通过dom中的脚本标记呈现的jquery将SAME方法调用放在显式单击处理程序上，它就可以正常工作。

为什么会这样，我可能做错了什么？谢谢！

代码!!

＆＃13;

＆＃13;

// 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>
    )
  }
})

＆＃13;

＆＃13;

＆＃13;