從onclick中調用React組件函數危險地設置inHTML

在此處反應新手。我有一個contenteditable div，它有dangerouslySetInnerHTML作爲孩子，因爲我需要在運行時格式化用戶輸入的任何內容。在特定的範圍內點擊HTML，我想setState包含組件的變量之一。從onclick中調用React組件函數危險地設置inHTML

可以這樣做嗎？

如果不是，我應該如何改變我的結構？

下面的代碼：

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（）方法是什麼，我走的。

來源

2015-05-29 user4773422

請向我們展示您的代碼，您到目前爲止 – marcel

@marcel，已添加代碼。 – user4773422

'onInput'應該做些什麼？它工作嗎？它是否按預期調用方法？ – marcel

試試這個：

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

來源

2015-05-29 08:47:35 marcel

在ES6中，你必須使用'this.doSomething（）'。我不知道它是如何在ES5上...... – marcel

謝謝@marcel。 'this.doSomething（）'取得了訣竅！ – user4773422

如果你希望你的跨度來響應點擊事件，你應該指定事件處理程序（DoSomething的）你的分量被重新描繪後，才，因爲當你assing新的價值的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樹工作。

來源

2015-05-29 10:43:27 beshanoe

即將顯示的危險HTML是動態的，並且可能會根據用戶以前選擇的選項而改變。在這種情況下，它可能根本沒有任何，但是隻要點擊任何DOM，就會調用相同的函數 – user4773422

是的，如果沒有span元素，div上會有事件處理函數，但是I不明白marcel的答案如何幫助解決問題，因爲它只是調用updateText方法中的this.doSomething方法，而span的onclick字段接收doSomething調用的結果。無論如何，你不能assing跨度的點擊處理程序，這將有直接訪問this.do這樣的東西 – beshanoe

我明白你的觀點。也許我需要重做整個事情。感謝您指出了這一點！ – user4773422

從onclick中調用React組件函數危險地設置inHTML

回答

相關問題