html 中元素的 OnChange 事件在 ReactJS 中使用 DangerouslySetInnerHTML 设置

Question

我有一个 json 文件，其中包含 HTML 个元素（超过 20 个）详细信息，例如 ID、值、类型等

我正在创建一个包含所有元素的大字符串，并使用 'DangerouslySetInnerHTML' 将其插入到我的 React JS 组件中。但是，我想在这些事件上使用 onChange 事件。

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

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

这肯定行不通，但是，我无法根据需要调用 onChange 事件。

我是 React JS 的菜鸟，请多多指教。

Answer 1

一个始终有效的解决方案是使用 jQuery，ReactJS 和 jQuery 可以很好地协同工作。以下解决方案也适用于动态生成的元素。

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

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

但是如果您想使用 React 功能，我建议您使用 React 方式来创建元素，而不是使用不安全的 DangerouslySetInnerHTML 方法。

html 中元素的 OnChange 事件在 ReactJS 中使用 DangerouslySetInnerHTML 设置

OnChange event for elements in html set with DangerouslySetInnerHTML in ReactJS

html

javascript

reactjs

react-jsx