2016-08-04 25 views
0

設置我有一個HTML元素(超過20個)的細節,如,ID,​​值,類型JSON文件等OnChange事件中的HTML元素與DangerouslySetInnerHTML在ReactJS

我創建一個大的字符串所有創建元素並將其插入到帶有「DangerouslySetInnerHTML」的React JS組件中。但是,我想在這些事件上使用onChange事件。

finalStartingElementStructure += 'onChange=' + '"' + this.onChangeForAllElements + '"'; 

onChangeForAllElements(e) { 
    // console.log('onChange INVOKED', e); 
    } 

這不能確定地工作,但是,我沒有按要求調用onChange事件的選項。

我是React JS的noob,請對此有所瞭解。

+0

爲什麼要創建一個字符串而不是讓React創建元素? – ScientiaEtVeritas

+0

有我的元素的Json文件將不斷變化,它更像是通過解析通過JSON文件創建HTML片段 – BigHairDev

+0

看看他,我認爲這將解決您的問題:https://stackoverflow.com/questions/31805713/avoid-using-dangerouslysetinnerhtml-when-wrapping-html-in-react-js?rq = 1 – ScientiaEtVeritas

回答

0

總是工作的解決方案是使用jQuery,ReactJS和jQuery在一起工作良好。以下解決方案也適用於動態生成的元素。

$(document).on('change', 'your-selector', this.onChangeForAllElements); 

onChangeForAllElements(e) { 
    // console.log('onChange INVOKED', e); 
} 

但是,如果你想使用的功能作出反應我建議使用作出反應的方式來創建內容,而不是使用不安全的DangerouslySetInnerHTML方法。

+0

感謝您的答覆,如果我不想提及'your-selector'靜態,即是否有方法可以提及此類問題,請將此方法調用onChange事件。 – BigHairDev

+0

因此,您在通過JSON解析時創建HTML片段。你也可以用動態選擇器在那裏調用jQuery的東西 - 在解析時,你有這個id,你說。 但是 - 或者 - 據我瞭解 - 所有創建的元素都應該有相同的事件,對吧?那麼你的選擇器可能是共同父代的後代選擇器,那麼它可能是靜態的。 – ScientiaEtVeritas

+0

你可以請分享一個示例代碼,以便我可以更清楚地理解一下 – BigHairDev