从onclick在dangerouslySetInnerHTML中调用React Component Function

Question

在这里反应新手.我有一个contenteditablediv dangerouslySetInnerHTML作为孩子,因为我需要在运行时格式化用户输入的内容.在特定范围内单击HTML内部,我想要setState包含组件的变量之一.

可以这样做吗？

如果没有,我应该如何改变我的结构？

这是代码:

updateText:function(){

    var txt = $('#text_Box').text();

    if(txt.indexOf('@Name') > -1)
    {
        txt = txt.replace('@Name','<span class=\'tagged\' contenteditable = \'false\' onclick=\'doSomething()\'>:Name</span>');

    }
    this.setState({userText:txt});
}, 
render:function(){
  return <div className="inputDiv" contentEditable="true" type="text" className="form-control" id="text_Box" dangerouslySetInnerHTML={{__html:this.state.userText}} onInput = {this.updateText} />

}

我正在采取doSomething()方法.

Answer 1

如果希望跨度响应单击事件,则只应在重新呈现组件后分配事件处理程序(doSomething),因为当您为innerHtml分配新值时,将清除此组件中的所有事件处理程序.另一种解决方案是使用这样的事件委托:

onClick: function(e) {
    var $el = $(e.target);
    if ($el.is('span.tagged')) {
        this.doSomething($el);
    }
},

render:function(){
    return (
        <div 
            className="inputDiv form-control" 
            contentEditable="true"
            onClick={this.onClick}
            type="text" 
            id="text_Box" 
            dangerouslySetInnerHTML={{__html: this.state.userText}} 
            onInput={this.updateText} />
    );
}

另一种可能的解决方案是使用createElement,createTextNode和appendChild方法直接使用DOM树.

Answer 2

尝试这个：

updateText: function() {
    var txt = $('#text_Box').text();

    if (txt.indexOf('@Name') > -1) {
        txt = txt.replace('@Name', '<span class="tagged" contenteditable="false" onclick="' + this.doSomething() + '">:Name</span>');
    }
    this.setState({userText: txt});
}, 

render:function(){
    return (
        <div 
            className="inputDiv form-control" 
            contentEditable="true" 
            type="text" 
            id="text_Box" 
            dangerouslySetInnerHTML={{__html: this.state.userText}} 
            onInput={this.updateText} />
    );
}