0

我不知道如何表达这些之间的差异，所以请多多包涵：

我有一个使用 Aloha 编辑器库的反应应用程序。

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

ContentBlock
-> ContentBlockCanvas
-> ContentBlockToolbar

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

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

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

如果我通过 dom 中的脚本标记呈现的 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>
    )
  }
})

4

0 回答 0