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

【问题标题】：OnChange event for elements in html set with DangerouslySetInnerHTML in ReactJShtml 中元素的 OnChange 事件在 ReactJS 中使用 DangerouslySetInnerHTML 设置
【发布时间】：2016-08-04 12:35:51
【问题描述】：

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

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

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

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

这肯定不行，但是，我没有根据要求调用 onChange 事件的选项。

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

【问题讨论】：

为什么要创建一个字符串而不是让 React 创建元素？
包含我的元素的 Json 文件会不断变化，更像是我通过解析 JSON 文件来创建 HTML sn-p
看看他的，我想这会解决你的问题：stackoverflow.com/questions/31805713/…
感谢您的回复，但我不想替换 DangerouslySetInnerHTML。

标签： javascript html reactjs react-jsx

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的回答，如果我不想提及 'your-selector' static 怎么办，即有没有办法可以提及类似的内容，请将此方法称为 onChange 事件。
因此，您在解析 JSON 时创建了 HTML sn-p。你也可以用动态选择器调用 jQuery ——在解析时，你有 id，你说。但是——或者——据我了解——所有被创建的元素都应该有相同的事件，对吧？那么你的选择器可能是一个共同父级的后代选择器，那么它可能是静态的。
能否分享一个示例代码，以便我更清楚地理解
下面的选择器会选择一个id为父元素的所有子元素：#parent *。我不知道您的确切设置，但#parent 可能是具有 DangerouslySetInnerHTML 方法的元素。如果您想在解析时添加事件监听器，只需执行以下操作（假设您在相应的 React 组件内解析 JSON 文件，因此变量 this 可用）：$(document).on('change', '#'+id, this.onChangeForAllElements);
感谢您的回答，它帮助了 :) 唯一的变化是每个元素都会调用两次，知道为什么吗？