从onclick在dangerouslySetInnerHTML中调用React Component Function [英] Call React Component Function from onclick in dangerouslySetInnerHTML

问题描述

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

React newbie here. I have a contenteditable div which has dangerouslySetInnerHTML as the child, since I need to format whatever the user enters,at runtime. On a particular span click inside the HTML, I want to setState one of the variables of the containing component.

可以这样做吗？

如果没有，我应该如何更改我的结构？

If not, how should I change my structure ?

这是代码：

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（）方法正是我所采取的措施。

the doSomething() method is what I'm taking about.

推荐答案

试试这个：

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

这篇关于从onclick在dangerouslySetInnerHTML中调用React Component Function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！