Javascript 从onclick中调用React组件函数，输入危险的Html

我是新手。我有一个

contenteditable

div，它的子对象是

dangerlysetinerhtml

，因为我需要在运行时格式化用户输入的任何内容。在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} />

}

updateText:function（）{
var txt=$（“#文本框”）.text（）；
if（txt.indexOf（'@Name'）>-1）
{
txt=txt.replace（'@Name'，':Name'）；
}
this.setState（{userText:txt}）；
}, 
render:function（）{
返回
}

doSomething（）方法正是我要讨论的内容。

尝试以下方法：

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

updateText:function（）{
var txt=$（“#文本框”）.text（）；
if（txt.indexOf（'@Name'）>-1）{
txt=txt.replace（'@Name'，':Name'）；
}
this.setState（{userText:txt}）；
}, 
render:function（）{
返回(
);
}

如果希望跨度响应单击事件，则应仅在组件重新提交后分配事件处理程序（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} />
    );
}

onClick:function（e）{
变量$el=$（即目标）；
如果（$el.is（'span.taged'））{
这是doSomething（$el）；
}
},
render:function（）{
返回(
);
}

---

另一种可能的解决方案是直接使用createElement、createTextNode和appendChild方法处理DOM树。

我最近也有类似的要求。react应用程序得到了一块带有href属性的html，需要将其转换为onClick事件，以便我们能够解析和路由react应用程序中的链接

我的解决方案是使用regex，然后注册我自己的事件侦听器

//将html块作为字符串给定
myHtml=“”
//匹配所有href属性
let reg:RegExp=/href=“.*”？/g
//将href属性替换为自定义的“resolve”属性
myHtml.replace（reg，（href:string）=>{
//然后匹配href属性中引号之间的任何字符以提取uri本身
让uri=href.match（/（？）{
if（href）this.linkResolver（href）；
})
//删除要清除的自定义属性
节点[i]。removeAttribute（'resolve'）
}
}
//linkResolver是react中的一个函数
//您现在有一个onclick事件由危险的LysetinerHTML触发
链接解析程序（href:string）{
console.log（href）
}

请向我们展示您的代码far@marcel，已经添加了代码。应该做什么？它工作吗？它是否按预期调用方法？

onInput

在用户在div中输入文本时调用指定函数。它工作正常。好。我不知道此属性。：-）将要显示的危险HTML是动态的，并且可能会根据用户以前选择的选项而变化。在这种情况下，可能根本没有任何内容，但在单击任何DOM存在时都会调用相同的函数，如果没有span元素，div上会有事件处理程序，但我不取消理解marcel的答案如何帮助解决问题，因为它只是在updateText方法中调用了this.doSomething方法，而span的onclick字段接收到doSomething调用的结果。无论如何，您不能调用span的click处理程序，该处理程序将直接访问这个。doSomething这样我明白您的意思了。也许我需要重做这就是全部。谢谢你指出这一点！@Beshaone-你的答案是正确的。正如你在公认的解决方案中正确指出的那样（我不明白为什么它被接受而不是你的）this.doSomething将立即执行，其结果将与字符串的其余部分连接起来。该方法不允许您安装要在onClick中调用的处理程序。。。